【基础知识】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.putImageData(drawingSurfaceImageData,0,0);
    }

    //Event handles……

    /**
     * 当鼠标进入画布时保存旧状态
     * @param ev
     */
    canvas.onmousedown = function (ev) {
        //……
        saveDrawingSurface();
        //……
    };

    /**
     * 当鼠标在画布中移动时，可以绘制网格线
     * @param ev
     */
    canvas.onmousemove = function (ev) {
        var loc = windowToCanvas(e);

        //如果在拖拽状态
        if (dragging){
            restoreDrawingSurface();
            //……

            //如果要添加鼠标辅助线
            if (guidewires){
                drawGuidewires(mousedown.x,mousedown.y);
            }

        }
    }

    /**
     * 当鼠标移出画布时，回到旧状态
     * @param ev
     */
    canvas.onmouseup = function (ev) {
        //……
        restoreDrawingSurface();
    }