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

 

 1     var imgData;
 2     function canvas_copy(){
 3         var context = document.getElementById("pic").getContext('2d');
 4         var width = context.canvas.width;
 5         var height = context.canvas.height;
 6         imgData = context.getImageData(0, 0, width, height);
 7     }
 8 
 9     function canvas_paste(){
10         var context = document.getElementById("pic").getContext('2d');
11         context.putImageData(imgData,0,0);
12     }
13 
14     function pic_cancel(){
15         canvas_paste();
16     }