Question

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

我看到了clearRect()函数，但显然没有 clearCircle（）函数，所以我该怎么办？

我正在尝试的是：

绘制黑色矩形
在中间切出一个圆孔

＆＃13;

var context = document.getElementById('canvas').getContext('2d');
context.fillStyle = 0;
context.fillRect(0, 0, 150, 150);

// Now cut a circle in the middle...

＆＃13;

<canvas id="canvas" width="150" height="150">

＆＃13;

Answer 1

CanvasRenderingContext2D.globalCompositeOperation = 'destination-out';

是关键（见MDN）。

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

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

＆＃13;

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();

＆＃13;

body {
  background: #fcc;
}

＆＃13;

<canvas id="ca" width="200" height="200"></canvas>

＆＃13;

Answer 2

为什么不把圆圈填满白色？示例

ServerAlias

Answer 3

这是一个中间有圆圈的广场

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

如何擦除圆圈？

3 个答案: