我可以在绘制之前在Canvas2D中定义一个矩形吗？

基本上，我想有一个大的矩形，并从中切出较小的矩形。我可以绘制矩形，然后执行clearRect（x，y，w，h），但它删除了之前绘制的东西，甚至创建矩形。我可以在绘制之前在Canvas2D中定义一个矩形吗？

所以基本上，我可以在图像上画一个矩形，然后切割矩形而不影响它下面的图像？我对使用ctx.save和恢复有一个小小的想法，但我无法完全实现它 - 而且我不是100％确定这是正确的答案。

任何帮助将不胜感激！

感谢，

凸轮

来源

2016-03-06 Cameron C

另一种可能是使用路径：

呼叫context.beginPath()
与moveTo和lineTo和closePath定义外RECT，顺时针方向进行
以同样的方式挖出这些洞，但是，反转clockwi se
拨打context.fill()填充没有孔的矩形。

这只适用于你从一开始就知道所有漏洞的情况。这个答案有更多的细节这种方法： Polygon with a hole in the middle with HTML5's canvas

来源

2016-03-06 00:49:01

感谢您的帮助。在我自己的时间里，我发现了一个不同的解决方案，你可以在这个问题的答案部分看到它。无论如何，非常感谢您抽出时间来解释您的解决方案:) –

感谢markE和斯蒂芬提供的解决方案。然而，经过几个小时的搜索，我找到了自己的答案根据this答案。我不知道为什么它的工作原理，但检查出什么码我下面使用：

ctx.fillStyle = "grey"; 
ctx.beginPath(); 
ctx.rect(100, 100, 50, 50); 
ctx.rect(400, 0, -400, 400); 
ctx.fill();

出于某种原因，如果你申报你想先切出什么形状，然后BACKWARDS绘制叠加形状（？！）在你的区域，它削减了形状。 WTF Javascript？无论如何，它的工作原理:)

来源

2016-03-06 00:52:13

我猜测它是向后绘制的，基本上确保它是逆时针绘制的。另一种可能是调用'ctx.fill（'evenodd'）;'，请参阅我的回答中的链接 –

[以下是它的工作原理：]（https://www.w3.org/TR/2dcontext/）。 * fill（）方法必须填充当前路径的所有子路径，使用fillStyle并使用非零卷绕编号规则。打开的子路径在填充时必须隐式关闭（不影响实际的子路径）。因此，如果两个重叠但独立的子路径具有相反的绕组，则它们抵消并导致不填充。* **但是（！），**浏览器现在开始允许“偶数”绕组。如果使用，这会破坏你的代码。您可能想要为您的任务使用更多显式方法。 ;-) – markE

我可以在绘制之前在Canvas2D中定义一个矩形吗？

回答

相关问题