如何清除HTML5畫布中的圓弧或圓圈？

Question

我發現有一個clearRect()方法，但無法找到任何清除圓弧（或整圓）的方法。

有什麼辦法清除畫布中的弧線？

Answer 1

不是，一旦你在畫布上繪製了一些東西，就沒有任何東西可以清除，只是你繪製的像素。 clearRect方法不清除先前繪製的對象，它只是清除參數定義的空間中的像素。如果您知道包含它的矩形，則可以使用clearRect方法清除圓弧。這當然會清除該區域中的任何其他像素，因此您必須重新繪製它們。

編輯：MooGoo has given a much better answer below

Answer 2

沒有clearArc但是你可以使用組合操作來實現同樣的事情

context.globalCompositeOperation = 'destination-out' 

根據MDC此設置的效果

現有內容保持在與新形狀不重疊的位置。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

所以用這個模式中的任何填充形狀上最終會消除當前畫布的內容。

Answer 3

您可以使用clearRect（）方法擦除畫布的一部分（包括您的弧線），但是當您使用clearRect（）和arcs或其他使用beginPath（）和closePath（）在繪圖時，您也需要在擦除時處理路徑。否則，你可能最終會出現一個褪色的弧形版本。

//draw an arc (in this case, a circle) 
context.moveTo(x, y); 
context.beginPath(); 
context.arc(x,y,radius,0,Math.PI*2,false); 
context.closePath(); 
context.strokeStyle = "#ccc"; 
context.stroke(); 

//now, erase the arc by clearing a rectangle that's slightly larger than the arc 
context.beginPath(); 
context.clearRect(x - radius - 1, y - radius - 1, radius * 2 + 2, radius * 2 + 2); 
context.closePath(); 

Answer 4

這是一個相當於clearRect()的圓形。主要是根據@ moogoo的答案設置一個複合操作。

var cutCircle = function(context, x, y, radius){ 
    context.globalCompositeOperation = 'destination-out' 
    context.arc(x, y, radius, 0, Math.PI*2, true); 
    context.fill(); 
} 

見https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html：

Answer 5

這裏有一個更新的搗鼓你太（使用clearRect）：https://jsfiddle.net/x9ztn3vs/2/

它有一個clearApple功能：

block.prototype.clearApple = function() { 
    ctx.beginPath(); 
    ctx.clearRect(this.x - 6, this.y - 6, 2 * Math.PI, 2 * Math.PI); 
    ctx.closePath(); 
}