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

港控/mmm° 2022-07-13 01:27 225阅读 0赞

### **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][]

[DEMO]: http://htmlpreview.github.io/?https://github.com/qq20004604/some_demo/blob/master/canvas/Canvas%E7%BB%98%E5%88%B6%E4%B8%80%E5%BC%A0%E6%8A%98%E7%BA%BF%E5%9B%BE.html