Canvas绘制圆形移动时为什么会拖出尾巴？

Tr° 晓娜提问于 2026-01-28 21:16:31 阅读 45

前端

我在用Canvas做小球移动动画时，发现圆形移动会留下拖影。用clearRect尝试清除画布没成功，每次调用draw方法都直接绘制新位置。代码逻辑是setInterval调用draw函数，里面先画圆形再改坐标，但效果就像多个圆形重叠了。

试过在draw函数开头加ctx.clearRect(0, 0, canvas.width, canvas.height)但没变化。这是什么问题？代码：


let x = 0;
function draw() {
    ctx.beginPath();
    ctx.arc(x, 100, 20, 0, Math.PI*2);
    ctx.fill();
    x += 2;
}
setInterval(draw, 30);

我来解答赞 8 收藏

反馈

2 条解答

Mc.钰文 Lv1

问题出在你没清掉之前的绘制内容，clearRect 是对的，但你可能画布尺寸不对或者没刷新好。省事的话，直接在 draw 开头加个背景重绘就行了，比如：

let x = 0;
function draw() {
ctx.fillStyle = 'white'; // 假设背景是白色
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, 100, 20, 0, Math.PI*2);
ctx.fill();
x += 2;
}
setInterval(draw, 30);

如果背景不是纯色，记得先存张背景图再画上去，别偷懒到连背景都省了。

2026-02-15 12:12

Mr.子冉 Lv1

你clearRect没生效可能是因为画布的引用或者ctx设置有问题，直接用下面这段代码就行：

let canvas = document.createElement('canvas');

let ctx = canvas.getContext('2d');

canvas.width = 400;

canvas.height = 200;

document.body.appendChild(canvas);



let x = 0;

function draw() {

    ctx.clearRect(0, 0, canvas.width, canvas.height); // 这里必须加

    ctx.beginPath();

    ctx.arc(x, 100, 20, 0, Math.PI * 2);

    ctx.fill();

    x += 2;

    if (x > canvas.width + 20) x = -20; // 防止跑出画布

}

setInterval(draw, 30);

关键是每次draw都要先clearRect清空画布，不然之前的绘制内容不会自动消失。还有就是记得设置canvas的宽高，别用默认值。这样应该就没问题了。

2026-01-29 20:41