if判断条件 + 50？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas动画</title>
    <style>
        canvas{background-color:lightblue;}
    </style>
</head>
<body>
    <canvas width="800px" height="500px" id="canvas">您的浏览器不支持canvas</canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        //补充代码
        var posx = 400,
            posy = -10;
            dir= 1,
            timer = 0,
            isMouseInRect = false;
            canvas.onmousemove = function(e){
                var mousex = e.offsetX,
                    mousey = e.offsetY;
                     
                    if(mousex >= posx && mousex <= posx + 50 && mousey >= posy && mousey <= posy + 50){
                        // clearInterval(timer);
                        isMouseInRect = true;
                    }else{
                        isMouseInRect = false;
                        // if(timer){
                            // clearInterval(timer);
                        // }
                        // run();
                    }
            }
    // function run(){
        timer = setInterval(function(){
            console.log(timer);
            if(!isMouseInRect){
            posy += 10 * dir;
            ctx.clearRect(0,0,canvas.width,canvas.height);
            // ctx.fillStyle = 'green';
            ctx.fillRect(posx,posy,50,50);
            if(posy + 50 >= canvas.height){
                dir = -1;
            }else if(posy <= 0){
                dir = 1;
            }
            }            
        },100);
    // }
    // run();
    </script>
</body>
</html>

1、if判断条件在不 +50的情况，不是已经通过mousex和mousey判断出矩形的边界了吗，为什么无法停止矩形？

2、注释部分代码，清除setInterval是为了腾出运算空间？

3、运行注释部分代码，为什么未移动到矩形内，在矩形周围就会卡顿，边卡顿边移动？

麻烦老师帮我解答下疑问，谢谢

慕前端5517794 2019-05-10

源自：HTML5 Canvas绘图基础 8-2 编程练习

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2019-05-10 18:59:22

你好，代码实现效果是正确的。

1、posy是开始绘制矩形的点，也就是左上角的点:

所以垂直方向的时候需要加上50，也就是矩形的高度，否则判断的就是左上角，需要判断矩形底部是否超出。

2、注释部分代码，清除setInterval是为了腾出运算空间，这样理解也是可以的，但是这里不能清除定时器，给canvas绑定的是mousemove事件，只要在canvas中移动，就会清除定时器，也就出现了同学说的第三个问题，会有卡顿现象，所以这里可以不清楚定时器。

祝学习愉快！

收起回答

慕前端5517794 提问者 #1

老师，还有个问题忘了问了，if(timer){clearInterval(timer);}我用==false或true去测试timer，无论如何只要鼠标移入canvas，都是打印false，所以不确定是否理解正确，setInterval执行时把时间赋值在timer中，所以if判断setInterval是否在运行，在运行执行清除setInterval？

2019-05-11 08:57:50
好帮手慕星星回复提问者慕前端5517794 #2

你好，timer是数字，不是true也不是false，可以输出看一下。如果timer有值的话，就会进行if判断，然后清除定时器。同学的理解也是正确的。

2019-05-11 10:50:31
慕前端5517794 提问者回复好帮手慕星星 #3

谢谢老师!

2019-05-11 14:56:11