## 像素操作
**一、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 可選。在畫布上繪制圖像所使用的高度。
