javascript - 将鼠标悬停在 Canvas 中的图像上

Question

我正在尝试使用 Canvas 制作一个简单的点击游戏，当我将鼠标悬停在绘制的图像上时，我想将光标更改为指针，并在我悬停时将其更改回默认值。所以我试图为 Canvas 上的每个对象制作一个悬停功能。有什么简单的方法可以检查我是否将鼠标悬停在图像上？到目前为止，我的代码看起来像这样:

//heres an object for my canvas
var cupboard = {
x:200,
y:320,
h:300,
w:180,
imgUrl:"data\\cbc.png",
type:2,
status:'c',
onhover: function(e,canvas)
{
    if((e.x >= this.x && e.x <= this.x+this.w) &&(e.y >= this.y && e.y <= 
    this.y+this.h)){
        canvas.style.cursor = "pointer";
    }
    else
    {
        canvas.style.cursor = "default";
    }
}
//i use an array for these objects
room1[cupboard,silverkey];

//heres the event listener   
 document.getElementById("mainCanvas").addEventListener("mousemove",
function(evt){
         var mousepos = getMousePos(document.getElementById("mainCanvas"),evt);
         for(i in room1)
         {
             (function(m){
                 room1[m].onhover(mousepos,document.getElementById("mainCanvas"));
             })(i);
         }

     });

Answer 1

我在网上查看了解决方案并浏览了此页面:

Add onclick and onmouseover to canvas element

markE 的回答很长，但可能对您有用，尤其是关于“.isPointInside”的部分。

希望这对您有所帮助!