## 第二课时：像素读写 以下三个方法与像素读写相关。 * `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 的像素区域，其中每个像素都是透明的黑色。