4.4.2 操作图像像素

如果要对图像进行进一步的处理，就可以先通过getImageData()方法获取图像像素，进行处理后再通过putImageData()方法，把处理后的像素重新绘制到画布中。

1）getImageData()方法

该方法用于获取画布上指定区域的图像像素数据。调用格式如下：

var data = context.getImageData(sx, sy, sWidth, sHeight)

其中，sx、sy为所选区域的坐标，sWidth、sHeight为所选区域的宽度和高度。该方法返回一个指向ImageData对象的引用，其内容为所选区域中的原始像素信息，该对象包括以下三个属性：

width：所选区域中的每行有多少个像素。

height：所选区域中的每列有多少个像素。

data：像素数值的一维数组，保存所选区域中每个像素的RGBA（红、绿、蓝、alpha）值，按该区域从左到右、从上到下按RGBA格式依次保存，如[r1,g1,b1,a1,r2,g2,b2,a2...] 。因此，所选区域中的每个像素，在这个数组中就变成了四个整数值。

2）putImageData()方法

修改了任何像素的RGBA的值之后，可以通过putImageData()方法把处理后的图像像素重新绘制到画布中。调用格式：

context.putImageData(imgdata, dx, dy [, sx, sy, sWidth, sHeight])

其中imgdata为像素数据，dx、dy是绘制目标的位置坐标，sx、sy是imgdata的位置坐标，sWidth、sHeight是imgdata的宽度和高度值（相对imgdata的sx和sy坐标的偏移量）。如果省略可选参数sx、sy、sw、sh，则表示绘制整个imgdata。

putImageData()方法会忽略图形的所有属性，不进行组合操作，也不会用gloabAlpha乘以像素来显示，更不会绘制阴影。