HTML5 Canvas 撤销上一次操作

利用canvas的getImageData复制当前画布（canvas）上的内容进行保存，再通过putImageData将之前保存的canvas内容覆盖到画布（canvas）上，以达到撤销的功能。

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

• R - 红色 (0-255)
• G - 绿色 (0-255)
• B - 蓝色 (0-255)
• A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。

参考：http://www.w3school.com.cn/tags/canvas_getimagedata.asp

 

    var imgData;
    function canvas_copy(){
        var context = document.getElementById("pic").getContext('2d');
        var width = context.canvas.width;
        var height = context.canvas.height;
        imgData = context.getImageData(0, 0, width, height);
    }

    function canvas_paste(){
        var context = document.getElementById("pic").getContext('2d');
        context.putImageData(imgData,0,0);
    }

    function pic_cancel(){
        canvas_paste();
    }