Вы можете добавить обработку событий мыши, используя метод isPointInPath canvas.Примерно так ниже (не проверено).
// add click event handler to canvas
// on click
var rect = canvas.getBoundingClientRect();
var mouseX = e.clientX - rect.left;
var mouseY = e.clientY - rect.top;
ctx.beginPath()
// draw stuff
if (ctx.isPointInPath(mouseX, mouseY)) {
// handle click
}
Это распознает любую фигуру, что очень полезно, если вы рисуете что-то кроме прямоугольников и окружностей.Тем не менее, основным недостатком этого является то, что вы должны перерисовывать каждый щелчок (или перемещение мыши, если вы добавляете указатели мыши).По своему опыту я могу сойти с рисования по крайней мере 300 объектов, прежде чем я начну видеть проблемы с производительностью.
Я должен также отметить, что есть ошибка в реализации Firefoxes isPointInPath, которая остается незафиксированнойнекоторая причина.Но, к счастью, это достаточно просто
CanvasRenderingContext2D.prototype.isPointInPath_mozilla = function( x, y )
{
if (navigator.userAgent.indexOf('Firefox') != -1){
this.save();
this.setTransform( 1, 0, 0, 1, 0, 0 );
var ret = this.isPointInPath( x, y );
this.restore();
} else
var ret = this.isPointInPath( x, y );
return ret;
}
, просто замените ctx.isPointInPath (x, y) на ctx.isPointInPath_mozilla (x, y) и все работает