老师看看我的理解

来源：8-1 Canvas动画

光aaaaand影

2019-08-19 09:17:35

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>canvas</title>
        <style>
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="300">
            您的浏览器不支持canvas!
        </canvas>
        <script type="text/javascript">
            var myCanvas=document.getElementById("myCanvas");
            // getContext() 方法返回一个用于在画布上绘图的环境
            var ctx=myCanvas.getContext("2d");
            var posX=0,posY=0,dir=1,isMouseInRect=false;
            myCanvas.onmousemove=function(e){
                var mouseX=e.offsetX;
                var mouseY=e.offsetY;
                
                if(mouseX>posX&&mouseX<posX+50
                    &&mouseY>posY&&mouseY<posY+50){
                        isMouseInRect=true;
                        // console.log(isMouseInRect);
                    }else{
                        isMouseInRect=false;
                        // console.log(isMouseInRect);
                    }
            }
            
            setInterval(function(){
                ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
                ctx.fillRect(posX,posY,50,50);
                if(posX+50>=myCanvas.width){
                    dir=-1;
                }else if(posX<=0){
                    dir=1;
                }
                // console.log(isMouseInRect);
                if(isMouseInRect==false){
                    posX+=10*dir;
                }
            },100)
            
            
        </script>
    </body>
</html>

老师，我觉得这样子判断比视频中的代码好理解一些吧。

我对if判断条件有一点迷，