【基础知识】HTML5 Canvas getImageData()和 putImageData() 在Canvas中绘制表面的保存与恢复(应用场景)

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

应用场景

在需要对画布内进行鼠标的细致操作时，需要用辅助线：

1、鼠标进入画布时，先用getImageData()保存之前的canvas，并保存到一个对象中。类似于“复制”功能。

2、鼠标在画布中移动时，开启辅助线。

3、鼠标移出画布中时，用putImageData()恢复之前的canvas。类似“粘贴”功能。

 

var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');
    //……

    //save和restore绘图表面
    /**
     * 保存状态
     */
    function saveDrawingSurface() {
        //复制画布全部区域到对象中
        drawingSurfaceImageData = context.getImageData(0, 0, canvas.x, canvas.y);
    }

    function restoreDrawingSurface() {
        //粘贴复制的内容覆盖context
        context.putImageDa