HTML5 globalCompositeOperation vs剪辑

Question

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

用HTML5组合的Mozilla指南包含两个主题：globalCompositeOperation和clip。看起来这两种方法都能让我做我想做的事，所以我想知道每一种方法的缺点是什么，我应该使用哪些。

我可以将globalCompositeOperation设置为source-atop (或者source-in，但是是在WebKit里似乎有问题)。然后让目标画布具有透明的黑色圆圈，并简单地在此基础上绘制源图像。这将确保只填写圆圈部分。

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

1. 这两种技术会像我说的那样起作用吗?还是我遗漏了什么？
2. 如果是这样的话，这两种技术中有哪一种明显比另一种更好呢？
3. 如果没有，哪一个总体上表现更好？

我(纯粹是推测)认为globalCompositeOperation会有更好的性能，因为它是在每个像素级别上应用该操作，而clip操作则需要进行多边形交叉。但这只是预感。

Answer 1

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

剪贴画..。除了反混叠，实际上，这是可悲的不同的浏览器。

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

测试内容如下:我测试过的每个浏览器中，剪辑速度都更快，火狐中的则大大加快了的速度。查看结果或自己尝试，这里