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();
    }