Question

我正在尝试使用画布制作一个简单的点和点击游戏，当我将鼠标悬停在绘制的图像上时，我想将光标更改为指针，当我将鼠标悬停时将其更改为默认值。所以我试图在画布上为每个对象创建一个onhover函数。有没有简单的方法来检查我是否将鼠标悬停在图像上？到目前为止，我的代码看起来像这样：

//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'的部分。

希望这有帮助！

将鼠标悬停在画布上的图像上

1 个答案: