如何使用：JavaScript Canvas 中多个对象的 globalCompositeOperation

Question

我正在尝试在 JavaScript canvas 中创建一个圆形菜单，类似于以下内容：

这是我使用的代码：

let canvas = document.querySelector("#canvas");
canvas.width = 500;
canvas.height = 500;
let ctx = canvas.getContext("2d");

ctx.fillStyle = "rgba(0,0,0,.45)"; // color
let circlePath = [];
let centerCircle = new Path2D();

for (let t = 0; t < 8; t++) {
  circlePath[t] = new Path2D();
  circlePath[t].moveTo(250, 250);
  circlePath[t].arc(
    250,
    250,
    190,
    Math.PI * 2 * 0.125 * t,
    Math.PI * 2 * 0.125 * t + Math.PI * 2 * 0.1175
  );
  circlePath[t].closePath();
  ctx.fill(circlePath[t]);
}

ctx.fillStyle = "#fff";
  centerCircle.moveTo(250, 250);
  centerCircle.arc(250,250,100,0,2*Math.PI);
  ctx.fill(centerCircle);
  

canvas.addEventListener("mousemove", function (event) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let t = 0; t < 8; t++) {
    if (ctx.isPointInPath(circlePath[t], event.offsetX, event.offsetY)) {
      ctx.fillStyle = "blue";
    } else {
      ctx.fillStyle = "rgba(0,0,0,.45)";
    }
    ctx.fill(circlePath[t]);
  }

  
  ctx.fillStyle = "#fff";
  centerCircle.moveTo(250, 250);
  centerCircle.arc(250,250,100,0,2*Math.PI);
  //ctx.globalCompositeOperation = "destination-out";
  ctx.fill(centerCircle);
});

#canvas {
            border: 1px solid #000;
            background: green;
        };

<canvas id="canvas"></canvas>

我遇到的问题是，当我尝试使用 ctx.globalCompositeOperation = "destination-out"; 使用白色圆圈在圆弧中间“打出”一个洞时，它使所有对象都消失了。

提前感谢您提供的任何意见。

Answer 1

想通了！必须将 ctx.globalCompositeOperation = "destination-out"; 放在正确的位置，然后是：ctx.globalCompositeOperation = "source-over";

这是更新后的代码：

let canvas = document.querySelector("#canvas");
canvas.width = 500;
canvas.height = 500;
let ctx = canvas.getContext("2d");

ctx.fillStyle = "rgba(0,0,0,.45)"; // color
let circlePath = [];
let centerCircle = new Path2D();

for (let t = 0; t < 8; t++) {
  circlePath[t] = new Path2D();
  circlePath[t].moveTo(250, 250);
  circlePath[t].arc(
    250,
    250,
    190,
    Math.PI * 2 * 0.125 * t,
    Math.PI * 2 * 0.125 * t + Math.PI * 2 * 0.1175
  );
  circlePath[t].closePath();
  ctx.fill(circlePath[t]);
}

ctx.fillStyle = "#fff";
centerCircle.moveTo(250, 250);
centerCircle.arc(250,250,100,0,2*Math.PI);
ctx.globalCompositeOperation = "destination-out";
ctx.fill(centerCircle);
ctx.globalCompositeOperation = "source-over";

canvas.addEventListener("mousemove", function (event) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let t = 0; t < 8; t++) {
    if (ctx.isPointInPath(circlePath[t], event.offsetX, event.offsetY)) {
      ctx.fillStyle = "blue";
    } else {
      ctx.fillStyle = "rgba(0,0,0,.45)";
    }
    ctx.fill(circlePath[t]);
  }

  
  ctx.fillStyle = "#fff";
  centerCircle.moveTo(250, 250);
  centerCircle.arc(250,250,100,0,2*Math.PI);
  ctx.globalCompositeOperation = "destination-out";
  ctx.fill(centerCircle);
  ctx.globalCompositeOperation = "source-over";
});

#canvas {
            border: 1px solid #000;
            background: green;
        };

<canvas id="canvas"></canvas>

如何使用：JavaScript Canvas 中多个对象的 globalCompositeOperation

How to use: globalCompositeOperation on multiple objects in JavaScript Canvas

javascript

canvas

2d