为什么鼠标移上去不会停止
来源：8-2 编程练习
Aries典
2018-10-31 14:13:56
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas动画</title>
<style>
canvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas width="800px" height="800px" id="canvas">您的浏览器不支持canvas</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var parX=30
parY=0
zk=1
ismove=false;
canvas.onmousemove=function(e){
var moveX=e.offsetX;
var moveY=e.offsetY;
if(moveX>parX && moveX<parX+50 && moveY>parY && moveY<parY+50 ){
ismove=true;
}else{
ismove=false;
}
}
setInterval(function(){
parY=parY+10*zk;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle='green';
ctx.fillRect(parX,parY,50,50);
if(parY+50>=canvas.height){
zk=-1;
}else if(parY<=0){
zk=1;
}
},100)
</script>
</body>
</html>
1回答
-
好帮手慕星星
2018-10-31
动画效果实现的是可以的，如果在鼠标的onmousemove事件中判断停止条件，清除定时器就可以了，如下：
实现这种效果就可以了。
自己可以测试下，祝学习愉快！
0
相似问题