HTML5 globalCompositeOperation vs clip

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的方式来做，你会遇到麻烦。

测试结果如下：在我测试过的每个浏览器中剪辑速度更快，并且在Firefox中大幅加快。看结果还是自己试试here