javascript - 如何清除 Canvas 中圆圈的先前位置？

Question

我正在尝试使用 Canvas 和 JavaScript 制作 Pong。

我已经很多年没做游戏了，因此是初学者。

我在尝试移动球(目前只是它的 x 位置)并试图移除它之前的位置时遇到问题。我使用的代码适用于桨(向上和向下键移动它)。

但是，它似乎并不想与球一起工作。

我做错了什么？

this.draw = function() {
    ctx.clearRect(this.prevX - this.radius, this.prevY - this.radius, this.radius * 2, this.radius * 2);

    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.fill();

    this.prevX = this.x;
    this.prevY = this.y;
 }

jsFiddle .

我知道我正在使用 clearRect()，但我的印象是它只是删除了 Canvas 的矩形部分。

clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

Source .

请随意给我任何其他提示，因为我在这方面几乎是初学者。

Answer 1

实际上是因为您没有调用 beginPath，所以您绘制的每个新圆也会重绘所有旧圆!

用插图修复这里:

http://jsfiddle.net/UvGVb/15/

取出对beginPath的调用，看看之前发生了什么。