HTML5 canvas Mouseover事件

Question

如何将鼠标悬停或任何事件绑定到画布上的绘制对象？ 例如，我试过这个：

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的方法。 如果这是唯一的方法，我将使用它，我只是假设有一种方法将事件绑定到绘制的元素而无需额外的插件。 抱歉Canvas noob。 我在这里用我的代码做了一个小提琴： http ： //jsfiddle.net/jyBSZ/2/

Answer 1

（我把它作为发表的评论开始，然后意识到这是一个真正的答案。）

不幸的是，在它自己的javascript中，你不能。 没有画布对象，只有画布作为一个整体，以及你在其上下文中提取的内容。 像kinetic这样的插件可以为你创建对象，但是画布的全部意义在于浏览器可以将它视为单个静态图像。

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

Answer 2

在canvas元素中绘制的对象不是HTML元素，只是像素，因此不会像HTML元素那样抛出DOM事件。

您需要自己跟踪对象的位置并处理画布' onmousemove事件，以确定鼠标何时在您绘制的对象之上。

Answer 3

你可以使用jCanvas，看看这里

我为你的问题做了一个jsfiddle例子。

只需修改下一个回调以获得所需结果

 function mouseOut(layer){
$("#mouse-over-text").html('none options selected');
}

function mouseIn(layer){
$("#mouse-over-text").html(getTextForId(layer.name));
}