如何在 HTML 画布中仅将两个形状堆肥在一起而不影响其他形状

Question

所以我的目标很简单……我想。 我想画一个中间切出一个洞的矩形。 但我不希望那个洞穿过画布上的任何其他东西。 现在我有这样的事情：

context.fillStyle = 'blue';
    context.fillRect(0, 0, width, height);

    context.fillStyle = "#000000";
    context.beginPath();
    context.rect(0, 0 , width, height);
    context.fill();
    enter code here

    context.globalCompositeOperation="destination-out";

    context.beginPath();
    context.arc(width / 2, height / 2 , 80, 0, 50);
    context.fill();

但这也会穿过背景，我如何让它只穿过黑色矩形而不是其他任何东西？

视觉示例，以防我没有很好地解释：

Answer 1

这是您希望达到的目标吗？

 const context = document.getElementById("canvas").getContext('2d'); const width = 100; const height = 100; const circleSize = 30; context.fillStyle = "black"; context.fillRect(0, 0 , width, height); context.beginPath(); context.arc(width / 2, height / 2, circleSize, 0, 2 * Math.PI); context.clip(); context.fillStyle = "blue"; context.fillRect(0, 0, width, height);

 <canvas id="canvas"/>

这篇文章可能有用：
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

在上面的示例中，我使用的是clip 。 正如文档所述：

画布 2D API 的 CanvasRenderingContext2D.clip() 方法将当前或给定路径转换为当前剪辑区域。

这意味着在此行之后添加到上下文的任何元素将仅在该剪切路径内绘制。

Answer 2

看看这个，看看这是否是你要找的：

 <canvas id="canvas" width="200" height="160"></canvas> <script> class Shape { constructor(x, y, width, height, color) { this.color = color this.path = new Path2D(); this.path.arc(x, y, height / 3, 0, 2 * Math.PI); this.path.rect(x + width / 2, y - height / 2, -width, height); } draw(ctx) { ctx.beginPath(); ctx.fillStyle = this.color; ctx.fill(this.path); } } var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); shapes = []; shapes.push(new Shape(40, 40, 80, 80, "blue")); shapes.push(new Shape(60, 65, 70, 70, "red")); shapes.push(new Shape(80, 40, 65, 65, "gray")); shapes.forEach((s) => { s.draw(ctx); }); </script>

我正在使用Path2D()因为我从之前做过的事情中得到了一个快速示例，但是没有它也应该可行。 背后的理论很简单，我们只是想在圆圈上填上相反的东西。

我将半径硬编码为高度的三分之一，但您可以将所有这些更改为其他内容，甚至是最终用户可以更改的参数