HTML5 画布鼠标悬停事件

HTML5 canvas Mouseover event

本文关键字：悬停 事件 鼠标 布鼠标 HTML5      更新时间：2023-09-26

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

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的方法。如果这是唯一的方法，我会使用它，我只是假设有一种方法可以将事件绑定到绘制的元素，而无需额外的插件。对不起帆布菜鸟。我在这里摆弄了一下我的代码：http://jsfiddle.net/jyBSZ/2/

（

我开始是作为发布评论，然后意识到这是一个实际的答案。

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

如果你愿意，你可以将鼠标移动

事件绑定到画布，跟踪它的位置和你绘制内容的位置，并自己暗示它在"那个对象"上（实际上是插件的作用），但它都是单个画布上的鼠标移动事件，而不是鼠标悬停在画布上的事件。 （您甚至可以使事件绑定模拟"对象"的鼠标悬停事件，但在下面，它仍然基于检查移动和检查您自己的对象设置。

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

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

你可以

使用 jCanvas，看看这里

我为您的问题制作了一个 JSFIDDLE 示例。

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

 function mouseOut(layer){
$("#mouse-over-text").html('none options selected');
}
function mouseIn(layer){
$("#mouse-over-text").html(getTextForId(layer.name));
}
相关文章：