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 を徐々に変化させる場合はこんな感じ

view plainprint?

1. var canvas = document.getElementById('canvas');  
2. if ( ! canvas || ! canvas.getContext ) { return false; }  
3. ctx = canvas.getContext("2d");  
4.   
5. var w = canvas.width;  
6. var h = canvas.height;  
7.   
8. ctx.fillStyle = 'rgb(224, 224, 240)';  
9. ctx.fillRect(0,0,w,h);  
10.   
11. var step = 265 / (h * 1.5);  
12.   
13. var image = ctx.getImageData(0,0,w,h);    
14. for(var i=3; i<image.data.length ; i+=4) {    
15.     var alpha = 255 - ((i/4/h) * step);  
16.     if(alpha < 0) alpha = 0;  
17.     image.data[i] = alpha;  
18. }   
19. ctx.clearRect(0,0,w,h);  
20. ctx.putImageData(image,0,0);  

  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）はこんな感じ

view plainprint?

1. var canvas = document.getElementById('canvas');  
2. if ( ! canvas || ! canvas.getContext ) { return false; }  
3. ctx = canvas.getContext("2d");  
4.   
5. var w = canvas.width;  
6. var h = canvas.height;  
7.   
8. ctx.drawImage(canvas, 0, 0);  
9. var image = ctx.getImageData(0,0,w,h);  
10. var i = image.data.length;  
11.   
12. for(var y = h; y>0; y--){  
13.   for(var x = w; x>0; x--){  
14.     i -= 4;  
15.     var c = 0.298912 * image.data[i] + 0.586611 * image.data[i+1] + 0.114478 * image.data[i+2];  
16.     image.data[i] = image.data[i+1] = image.data[i+2] = parseInt(c);  
17.   }  
18. }  
19. ctx.clearRect(0,0,w,h);  
20. ctx.putImageData(image,0,0);  

  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);