鼠标移上去没有效果

来源：8-2 编程练习

lhebe

2019-04-06 10:44:20

<!DOCTYPE html>
<html lang="en">
<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 x=0, y=0,flag= 1,flag1=false;
canvas.onmousemove=function(e){
var mouseX= e.offsetX;
var mouseY= e.offsetY;
if(mouseX>x&&mouseX<x+50&&mouseY>y&&mouseY<y+60){
flag1=true;
}else{
flag1=false;
}
}
setInterval(function(){
if(!flag1){
y+=10*flag;
}

context.clearRect(0,0,canvas.width,canvas.height);
context.fillRect(100,y,50,60);
context.fillStyle='green';
context.fill();
if(y+60>=canvas.height){
flag=-1;
}else if(y<=0){
flag=1;
}
},100)
</script>
</body>
</html>