问个问题~~~

来源：8-2 编程练习

Oo君陌oO

2019-03-07 21:15:48

<!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 fx=150,fy=0,xs=1,inter=true;
        canvas.onmousemove=function(e){
         var hqx=e.offsetX,hqy=e.offsetY;
         if(hqx>fx && hqx<fx+50 && hqy>fy && hqy<fy+50){
         inter=false;
         }else{
         inter=true;
         }
        }
        setInterval(function(){
         if(inter){
         fy+=10*xs; 
         }
          context.clearRect(0,0,canvas.width,canvas.height);
            context.fillStyle="green";
            context.fillRect(fx,fy,50,50);
            if(fy+50>=canvas.height){
             xs=-1;
            }else if(fy<=0){
             xs=1;
            }
        },100)
        
        
    </script>
</body>
</html>

为啥onmoseover不可以呢

写回答

1回答