Canvas绘制的正方形宽度不恒定问题求助

AI 小北

2026-7-10

Canvas正方形移动时仅右侧延伸的问题解决

你的代码里每次调用move()都会画一个新的正方形，但没有清除之前画的内容，所以新正方形和旧的叠加在一起，看起来像是右侧不断延伸，而不是整个正方形移动。

解决方法

每次绘制新图形前，用context.clearRect(0, 0, canvas.width, canvas.height)清除整个画布，擦掉旧图形，只显示当前位置的正方形。
额外优化：添加keyup事件监听，松开按键时重置移动方向状态，避免松开按键后正方形还继续移动。

修改后的完整代码

JavaScript

let canvas = document.getElementById("canvas");
let width = window.innerWidth;
let height = window.innerHeight;
let context = canvas.getContext("2d");
let px = 0;
let directx = {"right": false, "left": false};
let speed = 6;

canvas.style.backgroundColor = "red";
canvas.width = width;
canvas.height = height;

document.addEventListener("keydown", startmove);
document.addEventListener("keyup", stopmove);

function startmove(event){
    if(event.key == "d"){
        directx.right = true;
        directx.left = false;
    }
    else if(event.key == "a"){
        directx.right = false;
        directx.left = true;
    }
}

function stopmove(event){
    if(event.key == "d" || event.key == "a"){
        directx.right = false;
        directx.left = false;
    }
}

function move(){
    // 先清除整个画布
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillRect(px, 0, 100, 100);
    if(directx.right == true){
        px = px + speed;
    }
    else if(directx.left == true){
        px = px - speed;
    }
    requestAnimationFrame(move);
}
move();