LimeJS : 改變 CanvasContext 圖形的透明度

LimeJS 的 CanvasContext 和其它 node 物件一樣，有 setOpacity 可以設定透明度，但它並無法改變在 CanvasContext 中繪製圖形的透明度。當然囉！我們可以在繪圖的指令中加入透明度的參數，一道道的去設定，在想，可以無腦的在呼叫 setOpacity 改變 CanvasContext 的透明度時，不用管裡面繪製了什麼，就將圖形按 setOpacity 的參數來直接換透明度？

在上一篇的「雄 : LimeJS : 取得 canvas 中某一點的顏色」中提到可以利用 getImageData() ，讓我們取得某一區塊的圖形資料。資料中每一個點包括了 RGB (紅綠藍)的的資訊和 A (透明度)，所以我們只要將第四個 byte 的透明度，依 CanvasContext 的透明度比例去計算後，再利用 putImageData 把資料寫回去即可達到改變圖形透明度的目的了。

下面假設 canvas 是一個 LimeJS 的 CanvasContext 物件，將繪圖區中圖形變更透明度的方法如下：

var ctx = canvas.getDeepestDomElement().getContext('2d');
var width = canvas.getSize().width;
var height = canvas.getSize().height;
var opacity = canvas.getOpacity();
var imageData = ctx.getImageData(0, 0, width, height);
for(var i=0;i<height;i++) {
for(var j=0;j<width;j++) {
var pixelAlphaIndex = (i*(width*4)) + (j*4) + 3;
var alpha = imageData.data[pixelAlphaIndex];
if( alpha > 0 ) {
imageData.data[pixelAlphaIndex] = Math.floor(alpha*opacity);
}
}
}
ctx.putImageData(imageData,0,0);

這個方法是一個點，一個點的掃描，並變更透明度的值，有空再來看看有沒有效率更高的方法。