## 第二課時：像素讀寫 以下三個方法與像素讀寫相關。 * `CanvasRenderingContext2D.getImageData()`：將畫布讀取成一個 ImageData 對象 * `CanvasRenderingContext2D.putImageData()`：將 ImageData 對象寫入畫布 * `CanvasRenderingContext2D.createImageData()`：生成 ImageData 對象 ### （1）getImageData() `CanvasRenderingContext2D.getImageData()`方法用來讀取`<canvas>`的內容，返回一個 ImageData 對象，包含了每個像素的信息。 ~~~ ctx.getImageData(sx, sy, sw, sh) ~~~ `getImageData()`方法接受四個參數。`sx`和`sy`是讀取區域的左上角坐標，`sw`和`sh`是讀取區域的寬度和高度。如果想要讀取整個`<canvas>`區域，可以寫成下面這樣。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); ~~~ `getImageData()`方法返回的是一個`ImageData`對象。該對象有三個屬性。 * ImageData.data：一個一維數組。該數組的值，依次是每個像素的紅、綠、藍、alpha 通道值（每個值的范圍是 0～255），因此該數組的長度等于`圖像的像素寬度 x 圖像的像素高度 x 4`。這個數組不僅可讀，而且可寫，因此通過操作這個數組，就可以達到操作圖像的目的。 * ImageData.width：浮點數，表示 ImageData 的像素寬度。 * ImageData.height：浮點數，表示 ImageData 的像素高度。 ### （2）putImageData() `CanvasRenderingContext2D.putImageData()`方法將`ImageData`對象的像素繪制在`<canvas>`畫布上。該方法有兩種使用格式。 ~~~ ctx.putImageData(imagedata, dx, dy) ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) ~~~ 該方法有如下參數。 * imagedata：包含像素信息的 ImageData 對象。 * dx：`<canvas>`元素內部的橫坐標，用于放置 ImageData 圖像的左上角。 * dy：`<canvas>`元素內部的縱坐標，用于放置 ImageData 圖像的左上角。 * dirtyX：ImageData 圖像內部的橫坐標，用于作為放置到`<canvas>`的矩形區域的左上角的橫坐標，默認為0。 * dirtyY：ImageData 圖像內部的縱坐標，用于作為放置到`<canvas>`的矩形區域的左上角的縱坐標，默認為0。 * dirtyWidth：放置到`<canvas>`的矩形區域的寬度，默認為 ImageData 圖像的寬度。 * dirtyHeight：放置到`<canvas>`的矩形區域的高度，默認為 ImageData 圖像的高度。 下面是將 ImageData 對象繪制到`<canvas>`的例子。 ~~~ ctx.putImageData(imageData, 0, 0); ~~~ ### （3）createImageData() `CanvasRenderingContext2D.createImageData()`方法用于生成一個空的`ImageData`對象，所有像素都是透明的黑色（即每個值都是`0`）。該方法有兩種使用格式。 ~~~ ctx.createImageData(width, height) ctx.createImageData(imagedata) ~~~ `createImageData()`方法的參數如下。 * width：ImageData 對象的寬度，單位為像素。 * height：ImageData 對象的高度，單位為像素。 * imagedata：一個現有的 ImageData 對象，返回值將是這個對象的拷貝。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var imageData = ctx.createImageData(100, 100); ~~~ 上面代碼中，`imageData`是一個 100 x 100 的像素區域，其中每個像素都是透明的黑色。