2010年9月11日土曜日

HTML5 canvas でピクセル処理

canvas の各ピクセルに対して処理を行って、さまざまなエフェクトを実現するには、

 getImageData(x0,y0,x1,y1)

を使います。
例えば、
 var image = ctx.getImageData(0,0,w,h);

とした場合、image にはピクセル単位の集合体がオブジェクトとなったもの(イメージデータ)が返ってきます。
このオブジェクトは、「data」というプロパティを持っていて、ここでピクセルデータを保持しています。

「data」プロパティの配列には、各ピクセルのRGBAデータが

 {R, G, B, A, R, G, B, A, ...}

の順番で格納されています。(R = Red, G = Greed, B = Blue, A = Alpha)
これがピクセル分だけ続きます。つまり配列の要素数は ピクセル数 x 4 になります。

例えば、Alpha を徐々に変化させる場合はこんな感じ


var canvas = document.getElementById('canvas');
if ( ! canvas || ! canvas.getContext ) { return false; }
ctx = canvas.getContext("2d");

var w = canvas.width;
var h = canvas.height;

ctx.fillStyle = 'rgb(224, 224, 240)';
ctx.fillRect(0,0,w,h);

var step = 265 / (h * 1.5);

var image = ctx.getImageData(0,0,w,h);
for(var i=3; i<image.data.length ; i+=4) {
var alpha = 255 - ((i/4/h) * step);
if(alpha < 0) alpha = 0;
image.data[i] = alpha;
}
ctx.clearRect(0,0,w,h);
ctx.putImageData(image,0,0);



モノクロ(monochrome)はこんな感じ

var canvas = document.getElementById('canvas');
if ( ! canvas || ! canvas.getContext ) { return false; }
ctx = canvas.getContext("2d");

var w = canvas.width;
var h = canvas.height;

ctx.drawImage(canvas, 0, 0);
var image = ctx.getImageData(0,0,w,h);
var i = image.data.length;

for(var y = h; y>0; y--){
for(var x = w; x>0; x--){
i -= 4;
var c = 0.298912 * image.data[i] + 0.586611 * image.data[i+1] + 0.114478 * image.data[i+2];
image.data[i] = image.data[i+1] = image.data[i+2] = parseInt(c);
}
}
ctx.clearRect(0,0,w,h);
ctx.putImageData(image,0,0);




 
 

0 件のコメント:

コメントを投稿