html - 在 Canvas 中反向剪裁

Question

我想剪辑 html5 Canvas ，以便我可以按照下图实现绘图结果。

我想实现剪辑路径，以便所有绘图仅在黑色区域执行。

Answer 1

方法一
假设白色区域是透明的，黑色是不透明的，那么您可以使用复合模式:

ctx.globalCompositeOperation = 'source-in';
... draw graphics on top - only solid color will be affected ...
ctx.globalCompositeOperation = 'source-over';      // reset to default mode

A demo fiddle for this here
方法二
另一种更简单的方法是简单地用您需要的图形填充 Canvas ，然后使用 clearRect()对于您想要透明的那些区域。
此操作相当快，因此不应有任何闪烁(以防您可以通过单个 requestAnimationFrame 调用触发此操作)。
A demo fiddle with clearRect
A demo fiddle with clearRect + requestAnimationFrame
请注意，调用 rAF 会使代码异步，但使用它的目的是您的绘制操作在帧更新内同步，因此将消除闪烁(如果您因某种原因遇到问题)。
方法三
通过对 rect() 的一系列调用，在要保留的区域周围创建矩形区域。 .使用 clip() 作为剪贴蒙版的设置.
如果非剪裁区域按特定顺序排列，则此技术效果最佳，否则您必须定义大量区域。
请记住首先将 Canvas 转换为 0.5 像素，并且仅对矩形使用整数值。
方法四
手动解析像素缓冲区以填充满足要求的区域中的像素，例如仅非透明像素。
请注意，这可能是最慢的方法，它受 CORS 限制的影响(如果您首先将外部图像绘制到 Canvas 上)，如果您想填充形状、图像、渐变等，则更加繁琐。如果您可能更喜欢从屏幕外的 Canvas 进行复制。
还有其他方法可以使用不同的复合模式和绘制顺序来实现相同的结果，但我保留它，因为它应该涵盖大多数场景。