LimeJS : 取得 canvas 中某一點的顏色

LimeJS 提供了 lime.CanvasContext 物件，供動態的畫圖。如果想取得 canvas 的內容，可以用 getDeepestDomElement().getContext('2d') ，例如：

var context = new lime.CanvasContext().setSize(600,600);
var ctx = context.getDeepestDomElement().getContext('2d');

canvas 提供 getImageData() 讓我們取得某一區塊的圖形資料，它的語法如下：

context.getImageData(x,y,width,height);

四個參數分別為：

• x : 左上角的 x 座標。
• y: 左上角的 y 座標。
• width : x 方向取多大。
• height : y 方向取多大。

所以如果以前面例子來說，想在 ctx 中取  (400, 300) 這一點的顏色值，可以用這樣的語法：

var pixel = ctx.getImageData(400, 300, 1, 1).data;

傳回的前四個元素分別對應到該點顏色的 RGBA 值：

• pixel[0] : 紅色 (R)。
• pixel[1] : 綠色 (G)。
• pixel[2] : 藍色 (B)。
• pixel[3] : 透明度 (A)。

如果想把取得圖形資料處理後再更新顯示的內容，可以使用 putImageData 寫回原 canvas。