тут набросал кое что ! может так пойдет ?? можно еще сделать что б только ровные линии +- ровные проходили проверку
<body>
<canvas id="c" width="400" height="150" style="border: solid red 1px"></canvas>
</body>
[JS]
<script>
var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
var o = {
cor: [],
handleEvent: function (e) {
if(e.type == 'mousedown') {
// сохраняем начальные координаты
this.cor.push([{x: e.x, y: e.y}])
canvas.onmousemove = this.draw
}
else if(e.type == 'mouseup') {
canvas.onmousemove = null;
// сохраняем конечные координаты
this.cor[this.cor.length-1].push({x: e.x, y: e.y})
// есть две линии , тогда проверяем на крест !
// можно проверку сделать и для 10 .
if(this.cor.length == 2) this.fn();
}
},
init: function () {
canvas.addEventListener('mousedown', o, false);
canvas.addEventListener('mouseup', o, false);
},
draw: function (e) {
ctx.beginPath();
ctx.fillRect(e.x,e.y, 5,5)
ctx.strokeStyle = 'red';
ctx.stroke();
},
fn: function (){
//узнаем какая линия горизонтальная
var cor1 = Math.abs(this.cor[0].startX - this.cor[0].endX)
var cor2 = Math.abs(this.cor[1].startX - this.cor[1].endX)
// X горизонтальная ну а Y само собой вертикальная
var x = (cor1 > cor2) ? this.cor[0] : this.cor[1];
var y = (cor1 > cor2) ? this.cor[1] : this.cor[0];
// сортируем по возрастанию
x = x.sort(function(a,b) {return a.x - b.x})
y = y.sort(function(a,b) {return a.y - b.y})
// проверяем
if(x[0].x < y[0].x && x[0].y > y[0].y && x[1].x > y[1].x && x[1].y < y[1].y) alert(2);
this.cor = [];
}
}
o.init();
</script>
[/JS]