我正在尝试使用canvas制作一个简单的点和点击游戏,我想在悬停在绘制的图像上时将光标更改为指针,并在悬停关闭时将其更改回默认值。因此,我尝试为画布上的每个对象创建一个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);
}
});
room1.some(obj => obj.onhover)
并在那里将其设置为'cursor'或'default'。P.S. 避免在循环中进行无用的DOM调用。将元素存储在变量中而不是(var canvas = document.getElementById('mainCanvas')
)。 - Kaiido