单击Canvas / SVG中的Event

Question

我正在玩HTML5 Canvas来开发一个互动的个人网站。 我创建了一个400x200的画布，然后在上面放了一个背景图像。现在在BG Image的顶部，我又放了5张图片。现在，我的要求是，根据点击的图像，我想要1，在画布外显示文本，2，灰显其他4个图像（更多是动画形式）。

我能够完成直到显示图像，我无法创建点击事件动作。是因为整个画布被视为一个单一的图像？如果是这样会使用#usemap工作？我尝试添加addEventListener事件但没有发生任何事情。

SVG有更简单的方法来实现同样的目标吗？

感谢您的任何指示。

Answer 1

您可以使用像此

这样的jquery在画布上添加单击处理程序

$("#canvasId").click(function(e){
    alert("canvas clicked";
}

现在您必须确定发生点击事件的图像。如果您知道图像的左上角和右下角，则可以确定单击的图像。要确定鼠标位置，您可以使用以下内容

var x = Math.floor((e.pageX-$("#canvasId").offset().left) / 20);
var y = Math.floor((e.pageY-$("#canvasId").offset().top) / 20);