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在所有浏览器上的工作方式都不同。

剪辑确实......除了抗锯齿之外，实际上，每个浏览器都有可悲的不同。

在我看来，这里适当的做法是使用剪辑。使用source-atop可能适用于您的特定情况，但它不像您所描述的那样可扩展。如果您想要更改其中的任何内容，比如说在您的圈子后面有背景，那么如果您使用globalComposite方式，则会遇到麻烦。

测试结果如下：我测试的每个浏览器中的Clip都比较快，而Firefox中的大大加快。查看结果或亲自尝试here