HTML5画布鼠标悬停事件

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新手。这里是我的代码：http://jsfiddle.net/jyBSZ/2/

- user2287474

Answer 1

很遗憾，在JavaScript中你无法实现此功能。Canvas没有对象，只有整个画布以及其上下文中绘制的内容。像kinetic这样的插件可以为您创建对象，但是Canvas的整个目的在于浏览器将其视为单个静态图像。 如果您想要实现此功能，您可以将mousemove事件绑定到Canvas上，跟踪其位置和您绘制内容的位置，并自行推断它是否在“该对象”上（实际上就是插件所做的）。但这只是在单个Canvas上进行mousemove事件，而不是在其组件上进行mouseover事件。（甚至可以使您的事件绑定模拟“对象”的mouseover事件，但在底层，它仍基于检查运动并检查自己的对象设置。）

- Scott Mermelstein

---

哦！我正在这个网站上（http://hakim.se/experiments/html5/blob/03/），试图看看他如何处理鼠标事件，我猜只是通过坐标。 - user2287474

@user2287474他已经将主要代码最小化，这使得很难分辨。在js/blob.min.js中，我可以看到他处理事件的大部分函数都是首先出现的，但是很难解释清楚。（我看到了一些关于键盘按键和触摸事件的内容）。他创建了对象来保存渲染信息，但是在其中某个地方，他在每个动画上都渲染了所有对象。 - Scott Mermelstein

我认为他指的是mousemove事件。使用mousemove事件来跟踪位置，然后使用条件语句在对象区域内时“做某事”。 - Nathan McKaskle

很好，Sephethus，谢谢你的建议。我更新了我的答案以反映你的评论。 - Scott Mermelstein

Answer 2

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

您需要自己跟踪对象的位置，并处理canvas的onmousemove事件，以确定鼠标是否悬停在绘制的对象之上。

- Rob Hardy

Answer 3

你可以使用jCanvas，查看这里。 我为你的问题制作了一个jsfiddle示例。 只需修改下一个回调函数以获得所需的结果。

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

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

- Eugen Halca