如何解决HTML5 globalCompositeOperation vs clip
| 我有一个很大的源图像,我想在圆内显示一小部分,而使画布在圆外的部分保持透明。 Mozilla HTML5合成指南涵盖两个主题:“ 0”和“ 1”。看来这两种方法都可以让我做我想做的事情,所以我想知道每种方法都有哪些缺点,应该使用哪些缺点。 我可以将globalCompositeOperation
设置为source-atop
(或source-in
,但这在WebKit中似乎有问题)。然后,使目标画布透明并带有黑色圆圈,并在其上方绘制源图像。这将确保仅填充圆形部分。
或者,我可以画一个圆形路径并使用clip
定义一个裁剪区域,然后在其上绘制源图像,这也应确保仅填充圆形部分(实际上,上面的Mozilla的页面甚至有一个用星星做很多事的例子)。
这两种技术会按我所说的那样工作吗,还是我错过了一些东西?
如果是这样,那么使用这两种技术中的任何一种,是否都存在任何明显的陷阱?
如果没有,总体上哪个更好?
我(纯粹是推测性地)认为globalCompositeOperation
将具有更好的性能,因为它是在每个像素级别上应用该运算,而the1ѭ运算需要进行多边形相交。但这只是预感。
解决方法
截至三月,globalCompositeOperation在所有浏览器上均无法正常运行。
Clip确实...除抗锯齿外,实际上,每个浏览器都不同。
我认为这里适合做的事情是使用剪辑。使用
source-atop
可能会适合您的特定情况,但并不是如您所描述的那样可扩展。如果您要更改任何内容,例如说在圈子后面有背景,那么使用globalComposite方式进行操作将遇到麻烦。
测试在:在我测试的每个浏览器中,Clip的速度都更快,而在Firefox中,Clip的速度更快。查看结果或在这里尝试一下
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。