Canvas元素，俨然一个画布，你可以通过JavaScript在Canvas元素上write and sketch图像，Canvas提供了可对图像进行像素级操作的方法，在Canvas中你可以以像素为单位绘制图像或者直接导入图像，之后就可以按照你的需求对图像进行修改。

 

 在Canvas中导入一张位图


 

 1 <!-- HTML Code -->
 2  <img id="canvasSource" src="images/canvas.jpg" alt="Canvas Source" />
 3  
 4  <canvas id="area" width="500" height="300">
 5  </canvas>
 6  
 7  <!-- Javascript Code -->
 8  <script type="text/javascript">
 9     window.onload = function() {
10     var canvas = document.getElementById("area");
11     var context = canvas.getContext("2d");
12     var image = document.getElementById("canvasSource");
13     context.drawImage(image, 0, 0);
14     };
15  </script>

 

  让我们看看这堆代码都做了什么，首先在HTML代码中创建了一个ID为canvasSource的Canvas元素，随后在JavaScript里通过Canvas元素的方法getContext取得该Canvas画布的上下文引用，再用drawImage()方法在Canvas中绘制了一张图像，如你所见，Canvas中绘制的图像，它与原图没有任何明显的区别。

 

 现在图像已经有了，看看我们怎么处理每个像素。

 

  在Canvas中，图像像素是按照从左至右，从上到下的顺序依次排列的，每一个像素信息包含4个值：红(0~255)、绿(0~255)、蓝(0~255)、透明度(0~255),所有像素信息存储在一个一维数组(pixels Array)中，下面这张图可以帮你理解像素数组.

 

   遍历这个数组，我们会得到些有趣的效果。

 

  灰度效果



 

 

 1 <script type='text/javascript'>
 2     var imgd = context.getImageData(0, 0, 500, 300);
 3     var pix = imgd.data;
 4     for (var i = 0, n = pix.length; i < n; i += 4) {
 5     var grayscale = pix[i  ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
 6     pix[i  ] = grayscale;     // red
 7      pix[i+1] = grayscale;     // green
 8      pix[i+2] = grayscale;     // blue
 9      // alpha
10      }
11     context.putImageData(imgd, 0, 0);
12  </script>

 

  这段代码首先通过getImageData方法调用后返回对象的data属性，得到图像的pixels Array,随后我们遍历它处理每一个像素，就像前面所说的，每个像素的信息(红，绿，蓝，alpha)是依次排放在pixels Array中的，那么pix[i]就是当前像素的红色通道值，同理pix[i+1]为绿色，pix[i+2]为蓝色，pix[i+3]为alpha通道值. 这里，用到一个亮度公式：

 

red x 0.3 + green x 0.59 + blue x 0.11.

 

 根据这个公式对图像中每一个像素进行计算并重新赋值，最后会得到原先图像的灰度图,就这么简单.

 

 

 原文：spyrestudios.com/html5-canvas-image-effects-black-white/

 资料: simon.html5.org/dump/html5-canvas-cheat-sheet.html(Canvas Cheat Sheet)

         wenku.baidu.com/view/48615a160b4e767f5acfce28.html(Pro Html5 Programming - Chapter 2)