带你快速玩转canvas（5）画布某时刻某部分画面的存储和恢复

7. 画布的读取和写入

解释：

1. 简单来说，就是通过一个API保存当前画布某部分区域的图案；2. 然后可以通过另外一个API来恢复保存时的图案，可以恢复到某个指定位置；3. 保存时，返回一个变量，这个变量是一个对象：   他有width和height属性表示画布宽高；   还有data属性，用于保存画布各个像素的状态；   data属性是一个数组，其保存原理是通过每个像素的rgba属性来保存；   因为rgba是4个属性，分别表示红、绿、蓝、透明度，值的范围是0~255（包括透明度，255表示不透明）；   因此，每个像素占用数组中四个位置。   然后这么做的，先取出坐标0,0点像素的四个属性，放在data属性数组中（此时data属性有四个元素）；   然后再找出坐标1.0点像素的四个属性，再放进去（此时data属性中有八个元素）；   然后放完画布上y=0的所有像素，再开始放y=1的所有像素，依次类推。4. 当已知data属性的存储原理时，可以通过修改data属性中，数组的元素的值，来修改存储的图像；5. 例如，将每个像素表示透明度的元素的值，修改为比较小的值，则存储的图像信息则变为半透明了（注意，此时原图像没又被改变）。6. 然后将修改后的存储的图像信息，通过api写入canvas，则新的图像变为半透明了。

ctx.getImageData(x, y, width, height);

1. 简单来说，就是从画布的x，y坐标开始，取width宽height高的矩形区域的图像信息，返回一个对象；2. 这个对象就是存储了图像的宽高和所有像素的信息；3. 恢复图像时，需要使用这个方法返回的对象；4. 如果width或者height为0，则可能会抛出错误（应避免）；5. 返回值是一个ImageData对象；

ctx.putImageData(imagedata, dx, dy)

1. 简单来说，就是将getImageData这个api返回的对象，通过这个api将存储的图像放置在起始坐标为（dx, dy）的地方；2. 设置时，图像的默认宽高是存储的原图像的宽高；3. 不会对存储的图像进行缩放；4. 图像绘制后，超出画布显示区域的，不会被显示。

ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

1. 简单来说，从原图像中，取出一部分，然后放到画布中。2. 具体来说，从原图像中，取出起始坐标为（dirtyX, dirtyY），宽高为（dirtyWidth, dirtyHeight）的矩形区域，然后绘制到画布上起始坐标（dx， dy）的区域；3. 同样，对图像绘制时，不会进行缩放；

DEMO见链接：
DEMO