HTML5 globalCompositeOperation 与剪辑

Question

我有一个大的源图像，我想在一个圆圈内显示它的一小部分，让圆圈外的画布部分保持透明。

Mozilla guide to Compositing with HTML5 涵盖两个主题：globalCompositeOperation 和 clip。看起来两个都可以让我做我想做的事，所以我想知道每个人的缺点是什么，我应该使用哪个。

我可以将globalCompositeOperation 设置为source-atop（或source-in，但那是seems buggy in WebKit）。然后让目标画布透明并带有黑色圆圈，并在其上简单地绘制源图像。这将确保只填充圆圈部分。

或者，我可以绘制一个圆形路径并使用clip 定义一个剪切区域，然后在其上绘制源图像，这也应该确保只有圆形部分会被填充（事实上，Mozilla 的页面甚至有一个用星星做的例子）。

1. 这两种技术都会像我说的那样有效吗？还是我遗漏了什么？
2. 如果是这样，这些技术中的任何一种是否存在任何重大问题，从而使一种明显优于另一种？
3. 如果不是，一般来说哪个性能更好？

我会（纯粹是推测）想象globalCompositeOperation 会有更好的性能，因为它在每个像素级别上应用操作，而clip 操作需要进行多边形相交。但这只是一种预感。

Answer 1

截至 3 月，globalCompositeOperation 在所有浏览器上的工作方式都不尽相同。

Clip 确实...除了抗锯齿，实际上，每个浏览器都不同。

在我看来，在这里做的适当的事情是使用剪辑。使用 source-atop 可能适用于您非常具体的情况，但正如您所描述的那样，它不是很可扩展。如果你想改变其中的任何一个，比如说你的圈子有背景，如果你用 globalComposite 的方式来做，你会遇到麻烦。

测试结果如下：Clip 在我测试的每个浏览器中都更快，而在 Firefox 中快得多。查看结果或自己尝试here