如何擦除圆圈？

Question

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

我看到了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...

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

Answer 1

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

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

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

Answer 3

CanvasRenderingContext2D.globalCompositeOperation = 'destination-out';

是关键（参见MDN）。

The existing content is kept where it doesn't overlap the new shape.

此演示为 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;
}

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

如何擦除圆圈？

How to erase a circle?

html

javascript

html5-canvas

pixi.js