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

Question

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

所以基本上，我可以在图像上绘制一个矩形，然后剪切矩形而不影响它下面的图像吗？我对使用ctx.save和恢复有一个小小的想法，但我无法让它发挥作用 - 而且我并不是100％肯定这是正确的答案。

非常感谢任何帮助！

谢谢，

凸轮

Answer 1

另一种选择可能是使用路径：

1. 致电context.beginPath()
2. 使用moveTo和lineTo和closePath定义外部矩形，顺时针方向
3. 以相同方式切出孔，但逆时针方向
4. 调用context.fill()填充没有洞的矩形。

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

Answer 2

感谢markE和Stefan提供解决方案。但是，经过几个小时的搜索后，我根据this回答找到了自己的答案。我不知道它为什么会起作用，但请查看我在下面使用的代码：

res.statusCode

出于某种原因，如果您首先声明要剪切的形状，然后在您的区域上绘制覆盖的形状BACKWARDS（？！），则会剪切出形状。 WTF Javascript？无论如何，它有效：）