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

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>