在前文里我们已经提到了ImageData，它包含了三条数据{width,height,CanvasPixelArray}，而其中CanvasPixelArray存储了所有像素点的RGBA数据,第一个像素的red,green,blue,alpha通道值对应的就是CanvasPixelArray[0]-CanvasPixelArray[3]，如此按从左往右，由上往下依次存储。
我们通过修改像素点的rgb值就能改变像素的色相，修改alpha值就能改变像素的不透明度。
上面的demo中，我们创建了一个50*50像素点的ImageData，那么ImageData.data包含的数据应该是有 50 x 50 x 4 条。
每12条一循环（即每隔两个像素），像素点的rgba值，没有经过设置的像素点，它们的缺省值是：[255,255,255,255]。
上例是，创建新的ImageData，相当于所有ImageData的初始值都是255。
下面针对图像的ImageData进行计算设值，以此改变图像的色相。这是一个RGB彩色转gray的效果。（效果同ie的滤镜：filter:gray();已经最新出现的webkit滤镜：-webkit-filter: grayscale(1);）
上面没有对ImageData.data做一次循环，而是对ImageData.width,ImageData.height做了两次循环。
两种循环其实是一样的。可以看下关系：ImageData.data.length = ImageData.width x ImageData.heigh x 4;
data的序号 n = ( (y * ImageData.width) + x) x 4 ;
而关于RGB转gray运算算法的知识，还可以参见这两篇文章：彩色转灰度算法，RGB向灰度转换的原理
在上例中，出现了一个canvas对象的新方法toDataURL,这个方法会将canvas对象转换成data_URIs,一个base64 strings。这样就能出现在image标签下中的src中了。
canvas提供像素级数据，为很多算法的应用提供了平台，实现photoshop中的众多神奇图像效果在前端都已成为可能。
甚至于我们还能实现电影的蓝幕效果——针对video的帧,通过drawImage绘进canvas，再做rgba处理，将规定颜色的像素的alpha值设为0，就能使特定部分变成透明，进而实现视频合成。查看演示