如何清除画布中圆圈的前一个位置？

Question

我想使用JavaScript的画布做傍。

我做了任何游戏已经很多年了，因此我相当初学。

我有一个问题，我试图移动球（只是它的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()，但我的印象只是删除了画布的矩形部分。

clearRect(x,y,width,height)：清除指定区域，并使其完全透明

Source。

随意给我任何其他提示，因为我几乎是一个初学者与此。

Answer 1

这实际上是因为你没有调用beginPath，所以你绘制的每个新的圆也重绘所有的旧圆圈！

修复这里说明：

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

取出调用beginPath看看发生了什么之前发生的事情。

Answer 2

我不是帆布专家，所以我会跟着“其他技巧太”的恳求。 :-)如果你离开画布，而是使用像div这样的html元素来绘制你的划桨和球，那么你就不必费心去除，只能移动。然后有很多库可以帮助你进行元素定位，动画等，其中jQuery将是我的第一选择。

Answer 3

当您渲染球的新位置时，您可能会给“clearrect”函数提供不正确的坐标。有些你引用的“这”看起来像他们可能是狡猾太：

var that = this; 

以上是一个函数里面 - 我认为这是引用“这个”在函数的局部范围，而不是范围球（这是我想你打算的）。如果需要，您可以设置对此（球范围）的引用并使用内部函数内部的引用。

尝试打印出球的坐标以及其以前位置的坐标。然后，您可以确定是否清除画布的正确区域。我也会检查你使用这个关键字，并确保它在你想要做的事情的正确范围内。

我只有一个快速查看，所以我很抱歉，如果我误解了你想要做的。