用canvas中的getImageData方法获取像素点数据

getImageData

作用： 用来获取canvas画布上指定矩形区域的像素数据；
参数：

参数	含义
x	矩形的左顶点横坐标
y	矩形的左顶点纵坐标
width	矩形的宽度
height	矩形的高度

返回值： 返回的是一个ImageData对象，该对象包含了三个只读属性：

属性	含义
ImageData.width	ImageData的宽度，用像素表示
ImageData.height	ImageData的高度，用像素表示
ImageData.data	类型为Uint8ClampedArray的一维数组，每四个数组元素代表了一个像素点的RGBA信息，每个元素数值介于0~255

ImageData.data的结构：
假设现在取到了画布上的两个像素点，分别是不透明度为100%的纯黑色和纯白色，那么平常在写css的时候可以这么表示：rgba(0,0,0,1)，rgba(255,255,255,1)

我们都知道，前面的三个参数代表了RGB颜色，这个与ImageData.data表示方式相同；最后一个参数1代表了透明度A，范围为(0, 1)。但是ImageData.data的元素数值范围都在(0, 255)。因此这里需要按照0 => 0，1 => 255的方式对应下。

因此，如果用getImageData()获取这两个像素点的信息，得到的ImageData.data如下：

[0,0,0,255,255,255,255,255]

注意：getImageData按照从左到右，从上到下的顺序去存储像素点信息的

示例：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
...

var imgData=ctx.getImageData(0,0,width,height);