getImageData的直译即“获得图像数据”，他的作用是从canvas中提取像素出来。所以，他是有返回值的。
语法及返回值
ctx.getImageData(x,y,width,height);
这就是他的语法。而他的返回值是一个ImageData对象：
ImageData { width=10, height=10, data=Uint8ClampedArray}
这个ImageData对象包括：width,height,以及一个像素信息数组data。
这个像素信息数组是重中之重。他包括red,green,blue,和alpha,且每个都是0-255的数值——连alpha也是。
这个data数组的大小由像素个数决定，即ImageData的width*height.如getImageData(1,1,1,1)，那data就只有一个像素信息；而getImageData(1,1,10,10)，则有10*10=100个。
而像素信息在data中是怎么保存的呢？本来我的理解，data可以是一个二维数组，每个元素就是一个数组，每个元素保存一个像素信息。
但是，我错了。data只是个一维数组！
data的元素始终依次是red,green,blue,alpha,red,green,blue。。。一直重复到最后一个。
所以，data的length始终是像素个数*4.而在循环data的时候，也是以4为步进。
了解了这个ImageData对象，那么，像素提取出来有什么用呢？我们可以把提出来的像素进行一些操作，然后放回canvas里，就能得到一幅新的图像——比如类似PS的滤镜效果。
而把ImageData放入canvas的方法，则是putImageData.
ctx.putImageData(imagedata,x,y)
注意，putImageData就没有width,height参数了，因为他们已经包含在了imagedata对象中。
图形例子
我画了一个圆形和一个矩形，再从中提取像素：
我把像素提出来后，对每个像素进行了反色（即255-本色），但我没改alpha通道。然后把改变后的imagedata放入canvas中。
效果预览：
[runcode id=’ksjdklj’]
点图形看结果
[/runcode]
不过，这效果太没特色了，无法激发人的学习欲望。所以我再写一个变图片的吧.
进行图像反色
[runcode id=”sjdk”]原图：偷自w3c
点图形看结果
[/runcode]
注意，经实验，imagedata的width和height是只读的。
效率问题
如果imagedata.data包含的像素越多，则在循环时耗时更久，对每个像素操作也会花去很多时间。
简单的说，图片越大，得到的像素越多，就越卡！！
总结：
getImageData有返回值，是imageData对象。包括width,height,data
imagedata.data以4为步进
imagedata的width与height不可更改
imagedata不放入canvas中就没有作用