Javascript 如何清除 HTML5 画布中的圆弧或圆？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3564717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I clear an arc or circle in HTML5 canvas?
提问by Alex Ivasyuv
I found that there's a clearRect()method, but can't find any to clear an arc (or a full circle).
我发现有一种clearRect()方法，但找不到任何清除圆弧（或整圆）的方法。
Is there any way to clear an arc in canvas?
有没有办法清除画布中的弧线？
采纳答案by robertc
Nope, once you've drawn something on a canvas there is no object to clear, just the pixels you've drawn. The clearRectmethod doesn't clear a previously drawn object, it just clears the pixels in the space defined by the parameters. You can use the clearRectmethod to clear the arc if you know a rectangle which contains it. This will of course clear any other pixels in the area, so you'll have to redraw them.
不，一旦您在画布上绘制了一些东西，就没有要清除的对象，只有您绘制的像素。该clearRect方法不会清除先前绘制的对象，它只是清除参数定义的空间中的像素。clearRect如果您知道包含它的矩形，则可以使用该方法清除圆弧。这当然会清除该区域中的任何其他像素，因此您必须重新绘制它们。
回答by MooGoo
There is no clearArchowever you can use Composite Operations to achieve the same thing
没有clearArc但是你可以使用复合操作来实现同样的事情
context.globalCompositeOperation = 'destination-out'
According to MDC the effect of this setting is
根据 MDC，此设置的效果是
The existing content is kept where it doesn't overlap the new shape.
现有内容保留在不与新形状重叠的地方。
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing
So any filled shape with this mode on will end up erasing current canvas content.
因此，任何启用此模式的填充形状最终都会擦除当前画布内容。
回答by reta
You can use the clearRect() method to erase a portion of the canvas (including your arc), but when you're using clearRect() with arcs or anything else that you used beginPath() and closePath() for while drawing, you'll need to handle the paths while erasing, too. Otherwise, you may end up with a faded version of your arc still appearing.
您可以使用 clearRect() 方法擦除画布的一部分（包括您的弧线），但是当您将 clearRect() 与弧线或任何其他在绘制时使用过 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();
回答by mikemaccana
This is a circular equivalent of clearRect(). The main thing is setting up a composite operation per @moogoo's answer.
这是 的循环等价物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();
}
See https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html:
请参阅https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html：
回答by Squirrl
Make sure to call beginPath()
确保调用 beginPath()
function animate (){
requestAnimationFrame(animate)
c.clearRect(0,0,canvas.width,canvas.height);
c.beginPath();
c.arc(x,y,40,0,Math.PI * 2,false);
c.strokeStyle='rgba(200,0,0,1)';
c.stroke();
c.fillStyle ='rgba(0,0,0,1)';
c.fillRect(x,y,100,100);
x++
} animate()
Credit to @Gabriele Petrioli in this answer: Why doesn't context.clearRect() work inside requestAnimationFrame loop?
在这个答案中归功于@Gabriele Petrioli：为什么 context.clearRect() 在 requestAnimationFrame 循环中不起作用？
回答by Chris Cousins
Here's an updated fiddle for you too (uses clearRect): https://jsfiddle.net/x9ztn3vs/2/
这里也有更新的小提琴（使用 clearRect）：https://jsfiddle.net/x9ztn3vs/2/
It has a clearApple function:
它有一个 clearApple 功能：
block.prototype.clearApple = function() {
ctx.beginPath();
ctx.clearRect(this.x - 6, this.y - 6, 2 * Math.PI, 2 * Math.PI);
ctx.closePath();
}
