如何在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中使用.