JavaScript画布：球在后面留下痕迹

开发一个简单的画布应用程序，您可以用枪射击子弹，但子弹会留下痕迹。我尝试过用clearRect清除画布，并将画布的宽度设置为自身，但没有成功。这是一个例子。相关片段：

Bullet.prototype：

Bullet.prototype = {
    render: function () {
        ctx.fillStyle = this.color;
        ctx.arc(this.coordinates.x, this.coordinates.y, this.size.radius, 0, Math.PI * 2, false);
        ctx.fill();
        return this;
    },
    animate: function () {
        this.coordinates.x += this.velocity.speed.x;
        return this;
    }
};

更新（）：

如何防止球留下痕迹？

在每个

子弹上。draw（）

您正在向同一路径2D添加更多的

圆弧

形状。

ctx.fill（）

您需要的是在每个项目符号处创建一个新的Path2d

Bullet.prototype = {
    render: function () {
        ctx.fillStyle = this.color;
        ctx.beginPath(); // this is a new Path2d
        ctx.arc(this.coordinates.x, this.coordinates.y, this.size.radius, 0, Math.PI * 2, false);
        ctx.fill();
        return this;
    },
    animate: function () {
        this.coordinates.x += this.velocity.speed.x;
        return this;
    }
};

请注意，由于
弧（x，y，半径，0,2*Math.PI，0）
实际上是一个闭合弧（一个圆），因此不需要对每个
项目符号.draw（）
调用
ctx.closePath（）
，您正在向同一路径2D添加更多的
弧
形状。
ctx.fill（）

您需要的是在每个项目符号处创建一个新的Path2d

Bullet.prototype = {
    render: function () {
        ctx.fillStyle = this.color;
        ctx.beginPath(); // this is a new Path2d
        ctx.arc(this.coordinates.x, this.coordinates.y, this.size.radius, 0, Math.PI * 2, false);
        ctx.fill();
        return this;
    },
    animate: function () {
        this.coordinates.x += this.velocity.speed.x;
        return this;
    }
};

请注意，由于
弧（x，y，radius，0,2*Math.PI，0）
实际上是一个闭合弧（一个圆），因此不需要调用
ctx.closePath（）
此代码中的某些内容占用了CPU。最终我的浏览器标签崩溃了。是的，我注意到它很慢。不知道为什么。编辑：算出了。gun.shoot（）在每一帧都被调用，并且只应该调用一次，所以我将其移动到main（）。还更新了JSFIDLE链接。不幸的是，它仍然留下了痕迹。你可以在代码中放一个调试器，然后打开chrome控制台来检查发生了什么。从我在chrome profiler上看到的情况来看，每次更新电话都比上次差。每一帧的渲染速度都比前一帧慢啊，每次你调用update，你就是在发射一颗新子弹。这就是为什么每一帧更新都比前一帧慢的原因。更新了一点，这样就不会崩溃。将其更新为仅渲染1个项目符号。修复轨迹后，您可以继续添加更多。（您可能不希望它每次调用update时都发牢骚，但这是修复跟踪后要做的下一件事）此代码中的某些内容占用了CPU。最终我的浏览器标签崩溃了。是的，我注意到它很慢。不知道为什么。编辑：算出了。gun.shoot（）在每一帧都被调用，并且只应该调用一次，所以我将其移动到main（）。还更新了JSFIDLE链接。不幸的是，它仍然留下了痕迹。你可以在代码中放一个调试器，然后打开chrome控制台来检查发生了什么。从我在chrome profiler上看到的情况来看，每次更新电话都比上次差。每一帧的渲染速度都比前一帧慢啊，每次你调用update，你就是在发射一颗新子弹。这就是为什么每一帧更新都比前一帧慢的原因。更新了一点，这样就不会崩溃。将其更新为仅渲染1个项目符号。修复轨迹后，您可以继续添加更多。（您可能不希望它每次调用update时都发子弹，但这是修复痕迹后要做的下一件事）