Javascript HTML5画布鼠标悬停事件

如何将鼠标悬停或任何事件绑定到画布上绘制的对象？例如，我尝试了以下方法：

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的方法。如果这是唯一的方法，我将使用它，我只是假设有一种方法可以将事件绑定到绘图元素，而无需额外的插件。对不起，诺布。我在这里修改了我的代码：

（我一开始只是发表评论，后来意识到这是一个实际的答案。）

不幸的是，在javascript本身中，您不能这样做。没有画布对象，只有画布作为一个整体，以及您根据其上下文绘制的任何内容。像kinetic这样的插件可以为您创建对象，但canvas的全部意义在于浏览器可以将其视为单个静态图像

---

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

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

---

您需要自己跟踪对象的位置，并处理canvas“

onmousemove

事件，以便确定鼠标何时位于绘制的对象上。

您可以使用jCanvas，请查看

我为你的问题树立了榜样

只需修改下一次回调即可获得所需的结果

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

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

---

哦！我在这个网站（）上，我想看看他是如何处理鼠标事件的，我想这只是通过corrdinartes实现的。@user2287474他最小化了他的主代码，这让人很难说。在js/blob.min.js中，我可以看到他处理事件的大部分函数都是第一个函数，但很难解释清楚。（我看到的是键盘按键和触摸事件）。他创建对象来保存渲染信息，但在其中的某个地方，他渲染了每个动画上的所有对象。我想他指的是mousemove事件。使用mousemove事件跟踪位置，然后使用条件语句在到达对象区域时“执行某些操作”。Fair point，Sephethus，谢谢。我更新了我的答案以反映您的评论。