HT for Web基于HTML5的图像操做（二）

上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数，经过颜色乘积实现的染色效果，本文将再次介绍另外一种更为高效的实现方式，固然要实现的功能效果是彻底同样的。此次咱们依然基于HTML5技术，但采用Canvas的globalCompositeOperation属性进行各类blending效果：

各类globalCompositeOperation效果可参考https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing 的说明，咱们采用“multiply”和“destination-atop”这两种blending效果，经过如下三个步骤实现:

一、先以染色颜色填充图片大小的矩形区域

二、采用“multiply”进行drawImage的绘制，达到如下效果

 

三、最后一步采用“destination-atop”的globalCompositeOperation方式，再次drawImage，此次绘制效果将会抠出图片像素区域，剔除非图片部分，最终达到咱们所要的染色效果图片：

全部代码以下

function createColorImage2(image, color) {
		var width = image.width;
		var height = image.height;                
		var canvas = document.createElement('canvas');
		var context = canvas.getContext( "2d" );
		canvas.width = width;
		canvas.height = height;
		context.fillStyle = color;    
		context.fillRect(0, 0, width, height);    
		context.globalCompositeOperation = "multiply";
		context.drawImage(image, 0, 0, width, height);
		context.globalCompositeOperation = "destination-atop";
		context.drawImage(image, 0, 0, width, height);
		return canvas;
	};

至此咱们有两种大相径庭的绘制方式，二者的代码量差很少，该选择谁呢？让咱们测试下两种实现方式的性能:

time = new Date().getTime();
for(var i=0; i<100; i++){
	createColorImage1(image, 'red');
}
console.log(new Date().getTime() - time);

time = new Date().getTime();
for(var i=0; i<100; i++){
	createColorImage2(image, 'red');
}
console.log(new Date().getTime() - time);

我在mac air的chrome浏览器下测试了以上代码，createColorImage1须要1630毫秒，createColorImage2须要29毫秒，二者相差56倍，也就是说采用globalCompositeOperation虽然进行了两次drawImage，但性能依然远高于经过getImageData逐个设置像素值的方式。

形成这种巨大差距的根本缘由在于createColorImage1的方式彻底基于CPU运算，js本就单线程，且密集数值运算也不是js的强项，而采用globalCompositeOperation的渲染方式，浏览器底层彻底能够采用GPU等硬件加速的方式达到更加的性能，所以两钟方式性能差别几十倍也不足为奇了，有兴趣可参考微软的几篇关于浏览器Canvas硬件加速相关的文章：

http://blogs.msdn.com/b/ie/archive/2011/04/26/understanding-differences-in-hardware-acceleration-through-paintball.aspx

http://msdn.microsoft.com/en-us/hh562071.aspx

以上两种方式都是基于HTML5的Canvas的2D方式，其实更直接借助GPU的应该是Canvas的WebGL技术，下篇咱们将介绍更好玩的基于WebGL的Shading Language的像素操做方式，固然使用Hightopo的HT for Web不须要关心这些底层技术细节，HT会自动选择最合适的染色机制，由于有些终端浏览器不支持globalCompositeOperation的功能，有些不支持WebGL的硬件加速，所以自动选择最合适的渲染机制也是须要底层框架足够智能化的。