Html5 canvas 如何填写'；对面'；画布上的形状？

假设我在HTML5画布上有一个圆（一个弧）。我可以这样填充它：

ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

这是一种享受。然而，如何才能填补相反的领域？现在它是带黑色圆圈的白色，但我希望它与下图的线条一致（白色是背景色，黑色是填充色）：

我知道我可以用黑色背景画一个白色的圆圈，但是背景可以是任何东西（所有的东西以前都在那里画过，所以仅仅交换颜色是不可能的）

另一件事是，不应该填充整个画布，而应该填充一个正方形和一个圆圈

我想买一个，但它似乎不适合我的需要，因为它们都没有按照我的需要行事

---

那么，如何才能像示例图像中那样填充“相反”区域呢？

通常的方法是使用“剪裁区域”，在该区域中，您可以制作一个适用于绘图操作的区域遮罩。HTML5Canvas能够制作一个剪辑遮罩，即圆圈本身

…但它缺少Google Gears画布中的subtract（）操作，我发现了它，他们声称它是“来自HTML5”…但显然不是

有人在这里回答了如何反转剪辑（），但它涉及屏幕外画布：

---

希望其他人会有更好的建议-/

您可以使用另一个画布作为遮罩：

//这是您要绘制的画布
var canvas=document.getElementById（'your-canvas'）；
var ctx=canvas.getContext（'2d'）；
//我会用天蓝色的背景覆盖一切
//只是为了证明
ctx.fillStyle=“天蓝色”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
//创建一个我们将用作遮罩的画布
var maskCanvas=document.createElement（'canvas'）；
//确保尺寸相同
maskCanvas.width=canvas.width；
maskCanvas.height=canvas.height；
var maskCtx=maskCanvas.getContext（'2d'）；
//此颜色是填充形状的颜色之一
maskCtx.fillStyle=“黑色”；
//戴上面具
maskCtx.fillRect（0,0，maskCanvas.width，maskCanvas.height）；
//设置异或运算
maskCtx.globalCompositeOperation='xor'；
//画出你想要取出的形状
maskCtx.arc（30,30,10,0,2*Math.PI）；
maskCtx.fill（）；
//在图像上绘制蒙版，并完成！
ctx.drawImage（maskCanvas，0,0）
在OP中绘制黑色形状——也就是说，绘制一个从中间切出一个圆的矩形

第一次调用beginPath（）；然后顺时针画圆；然后逆时针绘制矩形（反之亦然）；最后填充（）


var ctx=$（'#cv'）.get（0）.getContext（'2d'）；
ctx.fillStyle=“灰色”；
ctx.beginPath（）；
ctx.arc（2002001000,2*Math.PI）；
ctx.rect（400,0，-400,400）；
ctx.fill（）

在画布遮罩上使用XOR函数仅适用于不透明填充（即与globalAlpha不兼容）。解决这个问题的一种方法是使用.clip（）函数并用背景中的内容填充剪裁区域。然后，您可以将剪裁区域覆盖在原始画布上，在原始画布上执行所需的填充。
非常感谢，但在演示中，它是青色的，而不是白色的。你可能也经历过同样的事情吗？是的，我故意用这种颜色。这是背景色。希恩德尔：哦，对不起。很明显，这就是你使用的天蓝。。。它很有魅力，谢谢！我想强调的是，在填充画布之后，您将设置为
xor
。我在开始时设置了它，并填充了
xor
，但这很慢。我上一条评论（现在已删除）的一个改进：谢谢，我没有考虑过这一点。我说的“逆时针矩形”是指一个负维度，对吗？在阅读了绕组数规则后，我的想法是，负维的偶数补偿每对绕组。我的结论是：。谢谢，这个答案对Ejecta中的HTML5画布实现很有帮助，它似乎需要通过路径“敲出”一个圆来进行顺时针/逆时针操作。浏览器更宽容。@MichaelWaterfall我遇到了同样的问题，解决方法是指定偶数-奇数填充，如：ctx.fill（“偶数-奇数”）；为了简化，您可以使用arc函数的最后一个参数并将其设置为true。值得注意的是，如果将来有人遇到这个问题，那么ctx.arc中的200200表示矩形宽度的一半和高度的一半。在矩形中，因为这是一个正方形，所以有点混乱，前400是外矩形的宽度，-400是宽度的负数，最后400是高度。