在Canvas/SVG中单击事件

Question

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

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

有没有更容易的方法在SVG中实现相同？

感谢您的指点。

Answer 1

您可以使用jQuery在画布上添加单击处理这样

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

现在你必须确定这是发生click事件的图像。如果您知道图像的左上角和右下角，则可以确定您点击的图像。要确定鼠标位置，你可以使用类似以下的东西

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