html5 canvas - 如何使用'destination-out' 只清除最近绘制的形状？

Question

假设我绘制了一个绿色矩形，然后在其上绘制了一个蓝色矩形。我想在蓝色矩形上画一个圆孔，这样可以通过孔看到下面的绿色矩形。

我试过使用 destination-out 但它会清除下面的所有形状：

const ctx = document.querySelector("#canvas").getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 100);

ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 50, 50);

ctx.globalCompositeOperation = "destination-out";

ctx.beginPath();
ctx.arc(50 / 2 - 10 / 2, 50 / 2, 10, 0, Math.PI * 2);
ctx.fill();

ctx.globalCompositeOperation = "source-over";

<canvas
  id="canvas"
  width="500"
  height="200"
  style="background: black"
></canvas>

Answer 1

创建第二个 canvas，将蓝色矩形添加到其中，切出圆形，然后将其合并到第一个 canvas:

const ctx = document.querySelector("#canvas").getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 100);


const canvasTemp = document.createElement("canvas");
const ctxTemp = canvasTemp.getContext("2d");

ctxTemp.fillStyle = "blue";
ctxTemp.fillRect(0, 0, 50, 50);

ctxTemp.globalCompositeOperation = "destination-out";

ctxTemp.beginPath();
ctxTemp.arc(50 / 2 - 10 / 2, 50 / 2, 10, 0, Math.PI * 2);
ctxTemp.fill();

ctxTemp.globalCompositeOperation = "source-over";

ctx.drawImage(canvasTemp, 0, 0);

<canvas
  id="canvas"
  width="500"
  height="200"
  style="background: black"
></canvas>

Answer 2

要在当前内容后面绘制，请使用 destination-over 复合模式：

const ctx = document.querySelector("#canvas").getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 50, 50);

ctx.globalCompositeOperation = "destination-out";

ctx.beginPath();
ctx.arc(50 / 2 - 10 / 2, 50 / 2, 10, 0, Math.PI * 2);
ctx.fill();

ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 100);

<canvas
  id="canvas"
  width="500"
  height="200"
  style="background: black"
></canvas>

html5 canvas - 如何使用'destination-out' 只清除最近绘制的形状？

html5 canvas - how to use 'destination-out' to clear out the most recently drawn shape only?

html

javascript

canvas

html5-canvas