javascript - 如何在 Canvas 元素上注册鼠标事件？

Question

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

或者，更有可能的是，我是否已经绝望地迷失在 JavaScript 中？

个人背景:我是一名系统开发人员，在了解了 flex 和 flash 之后，我决定尝试一下 javascript。所以不要手下留情!

Answer 1

简而言之:不。 Canvas 只是像素。您需要的是 SVG(或 IE 上的 VML)——或者更好的类似 Raphaël 的东西它会为您处理(它在 IE 上使用 VML，在其他一切上使用 SVG)。

现在一个更长的答案:您可以使用 Canvas 来完成它，但是您必须自己跟踪所有对象和形状并计算自己点击了哪个对象等等，这可能不是您想要的。 <强>更新: 现在有图书馆可以为你做这件事，比如 EaselJS , KineticJS , Paper.js , Fabric.js和其他一些(有关更多信息，请参阅 comparison of canvas libraries)。

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

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

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

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

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