HTML5 globalCompositeOperation与剪辑

mgi*_*uca 1 html5 canvas

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

Mozilla的指导合成与HTML5包括两个主题:globalCompositeOperationclip.看起来这两个都会让我做我想做的事情,所以我想知道每个的缺点是什么,我应该使用哪些.

我可以设置globalCompositeOperationsource-atop(或者source-in,但在WebKit似乎有些错误).然后让目标画布透明,带有黑色圆圈,然后简单地在其上绘制源图像.这将确保仅填充圆形部分.

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

  1. 这两种技术都会像我说的那样有效,还是我错过了什么?
  2. 如果是这样的话,是否有任何重要的问题与这些技术中的任何一个明显优于另一个?
  3. 如果不是,哪一个一般有更好的表现?

我(纯粹推测性地)想象globalCompositeOperation会有更好的性能,因为它是在每像素级别上应用操作,而clip操作需要进行多边形交叉.但这只是一种预感.

Sim*_*ris 6

截至3月,globalCompositeOperation在所有浏览器上的工作方式都不一样.

剪辑确实......除了反锯齿,实际上,每个浏览器都有可悲的不同.

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

测试结果如下:我测试的每个浏览器中的Clip都更快,而Firefox中的速度更快.查看结果或在这里尝试自己