如何清除畫布中圓圈的前一個位置？

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; 

以上是一個函數裏面 - 我認爲這是引用「這個」在函數的局部範圍，而不是範圍球（這是我想你打算的）。如果需要，您可以設置對此（球範圍）的引用並使用內部函數內部的引用。

嘗試打印出球的座標以及其以前位置的座標。然後，您可以確定是否清除畫布的正確區域。我也會檢查你使用這個關鍵字，並確保它在你想要做的事情的正確範圍內。

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