問題與擦除畫布形狀

我遇到了我與背景顏色透支它刪除對象，我離開的地方與原來的形狀的輪廓的問題。 enter image description here

這裏是我使用

是的，我不使用明確的矩形，因爲圈可以重疊的代碼。

function erase(eraseColor) { 
    ctx.fillStyle = ctx.strokeStyle = eraseColor || "#FFFFFF"; 
    drawCircle(); 
    ctx.fillStyle = ctx.strokeStyle = fillColor; 
} 

function drawCircle() { 
    ctx.beginPath(); 
    ctx.arc(x, y, rad, 0, Math.PI * 2, true); 
    ctx.closePath(); 
    ctx.fill(); 
}

來源

2011-08-07 samccone

這可能是由於抗鋸齒。使清晰的圓圈略大（101％說）來彌補它。 –

你認爲這將工作時，圓圈重疊？我不確定。爲什麼不堅持使用常規的基於幀的動畫呢？ –

我相信這是由於抗鋸齒。該效果不應出現在不需要抗鋸齒（如矩形）的形狀上。畫出幾個像素的擦除圈（應該做的）。

萬一出現問題：you cannot turn off anti-aliasing for canvas。

Ray建議您應該考慮使用基於幀的動畫，並使用髒矩形進行優化。

要做到這一點，你只需將一個矩形標記爲髒，如果它內的任何像素已經改變（例如由於動畫）。然後清除畫布上的矩形（clearRect）並將其設置爲剪切矩形（clip）。然後，遍歷畫布上顯示的所有元素，並檢查它們是否與髒矩形重疊。如果是，則繪製該元素，如果不是，則跳至下一個元素。

來源

2011-08-07 17:26:22

+1的原因，但有很多移動的圓圈可能會彼此重疊，任何通過繪製背景畫圈都無法工作。應該使用框架進行動畫（如果需要，也可以使用髒矩形進行優化）。 –

我絕對同意。 –

基於框架的動畫會擦除所有像素，成本更高，然後重畫會低得多，那麼只需透支。除非我丟失了某些東西 – samccone

問題與擦除畫布形狀

回答

相關問題