利用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 对象的 属性中。

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     }