为什么我的鼠标停在上面，不能让矩形停止呀？
来源：8-1 Canvas动画
慕侠9181480
2019-09-03 15:05:56
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>阴影</title>
<style>
canvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="300">
您的浏览器不支持canvas
</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var posX=0, posY=0, dri=1, posBln=false;
canvas.onmouseover = function(e){
var mouseX = e.offsetX, mouseY = e.offsetY;
if(mouseX>posX && mouseX<posX+50 && mouseY>posY && mouseY<posY+50){
posBln = true
}else{
posBln = false
}
}
setInterval(function(){
if(!posBln){
posX=posX+10*dri;
}
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(posX,posY,50,50);
if(posX+50 >= canvas.width){
dri = -1;
}else if(posX <= 0){
dri = 1;
}
}, 100)
</script>
</body>
</html>写回答
1回答
-
你好同学，onmouseover是鼠标移入事件，当移入到蓝色盒子的时候只会触发一次。鼠标在蓝色盒子移动的过程中就不会再触发了，所以改为onmousemove事件，这个事件是鼠标移动的过程中一直触发。如下：
祝学习愉快，望采纳。
0
相似问题