Javascript 我试图在鼠标滑过和滑出时更改drawImage
我正在尝试这样做,这样当鼠标在var play设置的边界内时,它就会改变图像。我使用了与单击时更改图像相同的方法,但是mouseover和mouseout不想在这里工作Javascript 我试图在鼠标滑过和滑出时更改drawImage,javascript,canvas,mouse,mouseover,mouseout,Javascript,Canvas,Mouse,Mouseover,Mouseout,我正在尝试这样做,这样当鼠标在var play设置的边界内时,它就会改变图像。我使用了与单击时更改图像相同的方法,但是mouseover和mouseout不想在这里工作 var play = { x: 650, y: 360, width: 200, height: 100 } var playUpButton = new Image(); playUpButton.src = "images/PlayUp.png"; var playDownButton = n
var play = {
x: 650,
y: 360,
width: 200,
height: 100
}
var playUpButton = new Image();
playUpButton.src = "images/PlayUp.png";
var playDownButton = new Image();
playDownButton.src = "images/PlayDown.png";
var playHovering = false;
thisCanvas.addEventListener('click', checkPlay);
thisCanvas.addEventListener('mouseover', hoverPlay, false);
thisCanvas.addEventListener('mouseout', hoverPlay, false);
function seen_move(e)
{
var bounding_box = thisCanvas.getBoundingClientRect();
mouseX = ((e.clientX-bounding_box.left) *(thisCanvas.width/bounding_box.width));
mouseY = ((e.clientY-bounding_box.top) * (thisCanvas.height/bounding_box.height));
}
function draw_start()
{
context.drawImage(menubg, menubg.x, menubg.y, menubg.width, menubg.height);
if(playHovering)
{
context.drawImage(playDownButton, play.x, play.y, play.width, play.height);
}
}
function mouseInArea(top, right, bottom, left)
{
if(mouseX >= left && mouseX < right && mouseY >= top && mouseY < bottom)
{
return true;
}
else
{
return false;
}
}
function hoverPlay()
{
if(mouseInArea(play.y, play.x + play.width, play.y + play.height, play.x))
{
console.log("Hovering");
if(playHovering)
{
playHovering = false;
}
else
{
playHovering = true;
}
}
}
您的代码中似乎缺少以下内容
var thisCanvas = document.getElementById("thisCanvas");
功能checkPlay似乎也丢失了
请看这些文章:
您必须调用函数seen\u movee来获取鼠标位置
顺便说一句,我不知道seen_move中的额外代码是什么。我猜您正在创建鼠标相对于边界框的位置。我只是提一下,以防这也是一个问题:
// this usually get the mouse position
var bounding_box = thisCanvas.getBoundingClientRect();
mouseX = e.clientX-bounding_box.left;
mouseY = e.clientY-bounding_box.top;
// and you have this extra bit:
// *(thisCanvas.width/bounding_box.width)); and
// * (thisCanvas.height/bounding_box.height));
mouseX = ((e.clientX-bounding_box.left) *(thisCanvas.width/bounding_box.width));
mouseY = ((e.clientY-bounding_box.top) * (thisCanvas.height/bounding_box.height));
我没有添加所有代码。很抱歉造成混淆,这两个东西都存在。请在hoverPlay函数中添加一些console.log语句。没有所有的代码很难判断,但是seed_move函数可能永远不会被调用。