上篇介紹了HT for Web采用HTML5 Canvas的getImageData和setImageData函數，通過顔色乘積實作的染色效果，本文将再次介紹另一種更為高效的實作方式，當然要實作的功能效果是完全一樣的。這次我們依然基于HTML5技術，但采用Canvas的globalCompositeOperation屬性進行各種blending效果：
我們采用“multiply”和“destination-atop”這兩種blending效果，通過以下三個步驟實作:
1、先以染色顔色填充圖檔大小的矩形區域
2、采用“multiply”進行drawImage的繪制，達到以下效果
3、最後一步采用“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等硬體加速的方式達到更加的性能，是以兩鐘方式性能差異幾十倍也不足為奇了
以上兩種方式都是基于HTML5的Canvas的2D方式，其實更直接借助GPU的應該是Canvas的WebGL技術，下篇我們将介紹更好玩的基于WebGL的Shading Language的像素操作方式，當然使用Hightopo的HT for Web不需要關心這些底層技術細節，HT會自動選擇最合适的染色機制，因為有些終端浏覽器不支援globalCompositeOperation的功能，有些不支援WebGL的硬體加速，是以自動選擇最合适的渲染機制也是需要底層架構足夠智能化的。