如何在canvas元素上注册鼠标事件？

Question

我想用帆布做一个小桌面游戏，让自己熟悉javascript和画布。 我可以很好地绘制电路板，但现在我想让特定的元素响应鼠标事件。 我可以这样做吗？ 或者我是否需要为每个要绘制的板元素使用画布元素，并在每个元素上注册一个鼠标事件？

或者，更有可能的是，我绝对迷失在javascript中？

Som背景：我是一名系统开发人员，在了解了flex和flash之后，我决定尝试一些javascript。 所以不要拉扯任何拳！

Answer 1

简而言之：没有。 画布只是像素。 你需要的是SVG（或IE上的VML） - 或者更好的是像Raphaël那样会为你照顾它（它在IE上使用VML而在其他所有内容上使用SVG）。

现在更长的答案：你可以使用画布来做，但是你必须自己跟踪所有的对象和形状并计算自己点击了哪个对象，等等，这可能不是你想要的。 更新：现在有一些库可以为你做这些，比如EaselJS ， KineticJS ， Paper.js ， Fabric.js和其他一些库 （请参阅画布库的比较以获取更多信息）。

另一方面，使用Raphaël编写如下代码：

var circle = r.circle(50, 50, 40);

circle.attr({fill: "red"});

circle.mouseover(function (event) {
    this.attr({fill: "red"});
});

这很可能是你想要的。 如果您习惯使用HTML DOM和事件，感觉非常自然。 此外，它更便携 - 甚至可以在IE6中使用。

Answer 2

您必须自己进行所有跟踪，保存您在画布上绘制的项目的位置，边界，并在canvas标记上添加鼠标事件的侦听器。

这是另一个线程的示例：

得到画布内每个矩形的点击事件？

Answer 3

如果您可以访问Adobe Illustrator，则另一种选择可能是AI to canvas插件。 在本视频中，他们展示了一种为矢量形状定义可点击区域的技术： http ： //visitmix.com/work/ai2canvas/tutorial9.html