Javascript 如何删除一个圆？

我想从画布上的某个区域删除一个圆

我看到了函数，但显然没有clearCircle（）函数，所以我应该如何继续

我想做的就是：

• 画一个黑色的长方形
• 在中间剪一个圆孔

var context=document.getElementById（'canvas'）.getContext（'2d'）；
context.fillStyle=0；
fillRect（0,0,150,150）；
/现在在中间切成一个圆圈…< /代码>
为什么不把圆圈填成白色呢？范例

  context.fillStyle = 'white';
  context.fill();

这是一个正方形，中间有一个圆圈

jsFiddle：

javascript

var canvas = document.getElementById("Canvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(0, 0, canvas.width, canvas.height);

var clearCircle = function (xPos, yPos, Radius) {
    context.beginPath();
    context.arc(xPos, yPos, Radius, 0, 2 * Math.PI, false);
    context.fillStyle = '#000';
    context.fill();
    context.closePath();
}

clearCircle(200, 200, 150);

你不必做一个函数，我只是做了一个函数，因为你似乎想要一个
clearRect（）
，但使用了一个圆，所以
clearCircle（）
似乎很合适

CanvasRenderingContext2D.globalCompositeOperation = 'destination-out';

是钥匙（请参阅）

现有内容保留在不与新形状重叠的位置

此演示为HTML
正文定义了背景色，以演示圆圈实际上是透明的：


var c=document.getElementById（'ca'）.getContext（'2d'）；
//画矩形
c、 fillStyle='#5f6'；
c、 fillRect（10,10,180,180）；
//将全局复合操作设置为目标输出
c、 globalCompositeOperation='destination out'；
//画圈
c、 strokeStyle=“#000”；
c、 beginPath（）；
c、 弧（100,100,50,0，数学PI*2）；
c、 填充（）
正文{
背景：#fcc；
}
请提供一些代码或JSFIDLE。此外，这也取决于它后面是否画有什么东西，不需要擦除等等。@Canvas现在给你写了一把小提琴，但这将非常简单，因为没有其他东西criterai@Drahcir这基本上是一个clearRect，但是使用了一个圆圈@Canvas Fiddle，因为它不会透明。透明是什么意思？透明是“清晰”或“透明”谢谢，但它不会抹去一个圆，而是画一个圆。我需要一个空白区域。@Drahcir这是一个空白区域，基本上你要记住的是画布是画布，所以你必须考虑层，你先画最后一件东西，即背景，然后最后画前景项目，这样它们就不会被背景覆盖。因此，当你想从画布上擦除一个圆时，你必须覆盖一个圆，以便从技术上擦除已绘制的内容。实际上，我使用的是PIXI.js，我要按照描述创建画布，然后从中生成PIXI.Texture并在我的游戏中使用-画布将包含一个动画帧。你没有在标记中说明这一点：（我刚刚编辑了你的问题以添加PIXI.js标记，你也可以将圆圈颜色更改为与网页颜色相同的颜色，从而在画布上产生一个洞的错觉