如何擦除一个圆圈？ [复制]答案

【问题标题】：How to erase a circle? [duplicate]如何擦除一个圆圈？ [复制]
【发布时间】：2015-11-15 08:56:21
【问题描述】：

我想从画布的某个区域中删除一个圆圈。

我看到clearRect()函数，但显然没有clearCircle()函数，那我应该怎么做呢？

我真正想做的是：

画一个黑色矩形
在中间切一个圆孔

var context = document.getElementById('canvas').getContext('2d');
context.fillStyle = 0;
context.fillRect(0, 0, 150, 150);

// Now cut a circle in the middle...

&lt;canvas id="canvas" width="150" height="150"&gt;

【问题讨论】：

您能否提供一些代码或提供一个jsfiddle。这也取决于是否在其后面绘制了某些东西并且不需要擦除等等。
@Canvas 现在给你写个小提琴，但它会很简单，因为没有其他标准
@Drahcir 这基本上是一个 clearRect 但使用一个圆圈jsfiddle.net/9L2t4ar4
@Canvas Fiddle - jsfiddle.net/sn9ge47s

标签： javascript html html5-canvas pixi.js

【解决方案1】：

CanvasRenderingContext2D.globalCompositeOperation = 'destination-out';

是关键（见MDN）。

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

此演示为 HTML body 定义了一个背景颜色，以证明圆圈实际上是透明的：

var c = document.getElementById('ca').getContext('2d');

// Draw rectangle
c.fillStyle = '#5f6';
c.fillRect(10, 10, 180, 180);

// Set global composite operation to destination-out
c.globalCompositeOperation = 'destination-out';

// Draw circle
c.strokeStyle = "#000";
c.beginPath();
c.arc(100, 100, 50, 0, Math.PI*2);
c.fill();

body {
  background: #fcc;
}

&lt;canvas id="ca" width="200" height="200"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

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

jsFiddle : https://jsfiddle.net/9L2t4ar4/1/

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() 似乎合适

【讨论】：

谢谢，但它不会删除一个圆圈，它会画一个。我需要一个空白区域。
@Drahcir 那是一个空白区域，基本上你要记住的是画布就是画布，所以你必须考虑图层，你先画最后一件事。背景，然后最后绘制前景项目，这样它们就不会被背景覆盖。因此，当您想从画布上擦除一个圆圈时，您必须覆盖一个圆圈以从技术上擦除已绘制的内容。
实际上我正在使用 PIXI.js，我将按照描述创建我的画布，然后从中生成一个 PIXI.Texture 并在我的游戏中使用 - 画布将包含一个帧动画。
您没有在标签中说明这一点：（我刚刚编辑了您的问题以添加 PIXI.js 标签，您也可以将圆圈颜色更改为等于您的网页颜色以给出画布上有洞的错觉

【解决方案3】：

为什么不将圆圈填充为白色？示例

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

【讨论】：

因为它不会是透明的
哦。透明是什么意思？
透明为“清晰”或“透视”