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     }

 

转载于:https://www.cnblogs.com/moyan03/p/5620320.html