HTML5 globalCompositeOperation 与剪辑

Question

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

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

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

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

1. 这两种技术是否会像我说的那样起作用，还是我遗漏了什么？
2. 如果是这样，这两种技术中的任何一种是否存在明显优于另一种的主要问题？
3. 如果不是，一般来说哪个表现更好？

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

Answer 1

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

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

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

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