鼠标点击没有停止移动
来源：8-2 编程练习
慕函数4234673
2020-04-03 15:20:45
<!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 context=canvas.getContext("2d");
var posX=50,
poxy=0,
dir=1,//代表方向
mousemove=false //代表鼠标没动
canvas.onmousemove = function (e) {
if(e.offsetX >= posX && e.offsetX <= posX + 50 && e.offsetY >= posY && e.offsetY <= posY + 50){
mousemove = true;
canvas.style.cursor = 'pointer';
}else{
canvas.style.cursor = 'default';
mousemove = false;
}
}
setInterval(function(){
if(!mousemove){
poxy+=10*dir
}
context.clearRect(0,0,canvas.width,canvas.height)
context.fillStyle="green"
context.fillRect(posX,poxy,50,50)
if(poxy+50>=canvas.height){
dir=-1
}else if(poxy<=0){
dir=1
}
},300)
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2020-04-03
同学你好，poxy单词拼写有误，建议修改：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题