## 像素操作
**一、ImageData对象**
ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性： width 图片宽度，单位是像素 height 图片高度，单位是像素 data 包含着RGBA格式的整型数据，范围在0至255之间（包括255）。
我们具体来看看`data`属性：
`data` 属性返回一个对象，该对象包含指定的 ImageData 对象的图像数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）
color/alpha 信息以数组形式存在，并存储于 ImageData 对象的 data 属性中。
**二、 创建一个ImageData对像**
有两个版本的 `createImageData()` 方法：
**2.1 以指定的尺寸（以像素计）创建新的 ImageData 对象**
```
var imgData=cxt.createImageData(width,height);
```
一个新的具体特定尺寸的ImageData对像。所有像素被预设为透明黑。
实例：canvas-demo/createImageData.html：
下面的代码中，我创建了一个`100*100`像素的 ImageData 对象，然后为每个像素添加颜色
```
var imgData=cxt.createImageData(100,100);
for(var i=0;i<imgData.data.length;i+=4){
imgData.data[i+0]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
cxt.putImageData(imgData,10,10);
//第一个像素变为红色
data[0]=255; //R
data[1]=0; //G
data[2]=0; //B
data[3]=255; //A
```
**2. 2 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）**
```
var imgData=cxt.createImageData(imageData);
```
**三、获取场景像素数据**
```
cxt.getImageData(x,y,width,height);
```
x 开始复制的左上角位置的 x 坐标（以像素计）。
y 开始复制的左上角位置的 y 坐标（以像素计）。
width 要复制的矩形区域的宽度。
height 要复制的矩形区域的高度。
例子：颜色反转
```
var img=new Image();
img.src="mm.jpg";
img.onload=function(){
cxt.drawImage(img,10,10);
var imgData=cxt.getImageData(10,10,200,300);
var data=imgData.data;
for(var i=0;i<data.length;i+=4){
data[i]=255-data[i];
data[i+1]=255-data[i+1];
data[i+2]=255-data[i+2];
data[i+3]=255;
}
cxt.putImageData(imgData,230,10);
}
```
是不是很有透视感呢。
**四、在场景中写入像素数据**
```
cxt.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
```
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标，以像素计。
y ImageData 对象左上角的 y 坐标，以像素计。
dirtyX 可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY 可选。垂直值（y），以像素计，在画布上放置图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。
