修改ctx.fillRect的x、y变量为何不改变方块位置？求解决方案

原因 #

• 你只在页面初始化时执行了一次ctx.fillRect(x, y, 100, 100)绘制方块，后续按方向键修改x、y变量时，并没有重新触发绘制操作，画布上始终显示的是最初绘制的那个方块。
• Canvas属于即时模式的绘图系统：修改数据变量不会自动同步到画布显示，必须主动调用绘图API才能更新画面。

解决办法 #

1. 把绘制逻辑封装成独立函数，每次移动变量后调用这个函数重新绘制
2. 重新绘制前要先清除画布，否则旧方块会残留，导致视觉上看不出移动效果

修改后的完整代码：

<!DOCTYPE html>
<html>
<body>

<canvas id="canvasSpace" width="1460" height="710" style="border:2px solid #000000;"></canvas>

    <script>
        const canvas = document.getElementById("canvasSpace");
        const ctx = canvas.getContext("2d");
        let x = 735, y = 360;

        // 封装绘制函数
        function drawSquare() {
            // 清除整个画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 绘制新位置的方块
            ctx.fillRect(x, y, 100, 100);
        }

        // 初始化绘制一次
        drawSquare();

        function moveLeft() {x -= 10;}
        function moveUp() {y -= 10;} // 修正原逻辑：Canvas原点在左上角，y值越小位置越靠上，原代码y+=10会导致上键向下走
        function moveRight() {x += 10;}
        function moveDown() {y += 10;}

        function log() {
            alert("x = " + x);
            alert("y = " + y);
        }

        document.addEventListener('keydown', function(event) {
            if (event.keyCode == 37) {moveLeft();}
            if (event.keyCode == 38) {moveUp();}
            if (event.keyCode == 39) {moveRight();}
            if (event.keyCode == 40) {moveDown();}
            if (event.keyCode == 13) {log();}
            // 每次按键后重新绘制更新画面
            drawSquare();
        });
    </script>

</body>
</html>

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