本文探讨了使用HTML5 Canvas的globalCompositeOperation属性，通过'multiply'和'destination-atop'实现图像染色的效果。对比了这种方法与getImageData和setImageData函数的性能，发现前者在Chrome浏览器下性能优势明显，原因是浏览器底层可能利用GPU加速。同时预告了下篇将介绍基于WebGL的Shading Language进行像素操作。
上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数，通过颜色乘积实现的染色效果，本文将再次介绍另一种更为高效的实现方式，当然要实现的功能效果是完全一样的。这次我们依然基于HTML5技术，但采用Canvas的globalCompositeOperation属性进行各种blending效果：
我们采用“multiply”和“destination-atop”这两种blending效果，通过以下三个步骤实现:
1、先以染色颜色填充图片大小的矩形区域
2、采用“multiply”进行drawImage的绘制，达到以下效果
3、最后一步采用“destination-atop”的globalCompositeOperation方式，再次drawImage，这次绘制效果将会抠出图片像素区域，剔除非图片部分，最终达到我们所要的染色效果图片：
最低0.47元/天 解锁文章
扫一扫
2153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
