Canvas矩形移动速度控制与边界停止问题求助

嘿，我看到你刚学Canvas遇到了小麻烦，咱们一起来搞定它！

问题根源 #

你代码里的核心问题是变量作用域：每次调用draw()函数时，你都重新声明了let speed = 100;，这就导致你在边界判断里设置的speed = 0被直接覆盖了——相当于每次绘制都把速度重置回100，矩形自然停不下来。

修复方案 #

把speed变量移到draw()函数外面，作为全局变量（对初学者来说最简单直观），这样修改后的速度值就能被保留下来。另外，当矩形到达边界后，我们还可以停止请求动画帧，避免不必要的性能消耗。

下面是修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas{ border: 1px solid black; }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400">Your browser doesn't support canvas</canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var cnxt = canvas.getContext('2d');
        x = 0;
        y = 50;
        var t;
        // 把speed移到外面，作为全局变量
        let speed = 100;
        function draw(){
            cnxt.clearRect(0,0,400,400);
            cnxt.beginPath();
            cnxt.rect(x,y,25,25);
            cnxt.fillStyle = 'red';
            cnxt.fill();
            var timePassed = (performance.now()-t)/1000;
            var fps = Math.round(1/ timePassed);
            
            cnxt.font = '25px Arial';
            cnxt.fillStyle = 'black';
            cnxt.fillText("FPS: " + fps, 20,30);
            t = performance.now();

            // 先判断是否到达边界，再决定是否移动
            if (x >= 400 - 25){
                // 到达边界后停止请求动画帧，避免重复绘制
                return;
            }
            x += (speed * timePassed);
            
            window.requestAnimationFrame(draw);
        }
        // 初始化t的值，避免第一次计算timePassed出错
        t = performance.now();
        draw();
    </script>
</body>
</html>

额外优化点 #

1. 我把边界判断移到了x增加之前，这样矩形刚好碰到边界就会停止，不会超出一点点
2. 初始化了t的初始值，避免第一次计算timePassed时出现NaN的问题
3. 到达边界后直接return，不再调用requestAnimationFrame，节省性能

这样修改后，矩形移动到Canvas右侧边界（400-25，因为矩形本身宽度是25）就会稳稳停下来啦！

内容的提问来源于stack exchange，提问作者Yasmine