javascript - HTML5 canvas 鼠标悬停事件

Question

如何将鼠标悬停或与此相关的任何事件绑定(bind)到 Canvas 上绘制的对象？例如，我试过这个:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();

//STEP ONE
var stepOneRec = ctx.rect(20, 60, 266, 50);
ctx.stroke();
stepOneRec.addEventListener("mouseover", function() { alert('it works!'); });

在一个网站上，我看到它显示了一种使用 Kinetic.js 的方法。如果那是唯一的方法，我会使用它，我只是假设有一种方法可以将事件绑定(bind)到绘制的元素而无需额外的插件。对不起 Canvas 菜鸟。我在这里弄乱了我的代码:http://jsfiddle.net/jyBSZ/2/

Answer 1

(我从发表评论开始，然后意识到这是一个真实的答案。)

不幸的是，在它自己的 javascript 中，你不能。没有 Canvas 对象，只有整个 Canvas ，以及您在其上下文中绘制的任何内容。 kinetic 之类的插件可以为您创建对象，但 canvas 的全部意义在于浏览器可以将其视为单个静态图像。

如果你愿意，你可以将 mousemove 事件绑定(bind)到 Canvas ，跟踪它的位置和你画东西的位置，并自己暗示它在“那个对象”上(实际上是插件所做的)，但它是单个 Canvas 上的所有 mousemove 事件，而不是其组件上的 mouseover 事件。 (您甚至可以让您的事件绑定(bind)模拟“对象”的鼠标悬停事件，但在下面，它仍然基于检查移动和检查您自己的对象设置。)