canvas 如何进行回退操作？

Question

1.在开发canvas程序时，需要回退操作。我个人是在onmouseup事件时，获取使用getImageData()获取页面的所有像素点。
2.在触发回退事件时，调取putImageData()将点赋值到页面。
问题：在赋值到页面时，速度比较慢。有没有好的方法解决这个问题。

Answer 1

1.在触发onmouseup事件存储数据

try{
//存取画板的笔画
this.imgCach_arr.push($('#canvas')[0].toDataURL());
console.log('base64流长度',($('#canvas')[0].toDataURL().length)/1024,'KB')
//将存取的数据发送给当事人
let socket2SerData = $('#canvas')[0].toDataURL();
socket.emit('shareImag2ser',socket2SerData)
this.redo_index = this.imgCach_arr.length - 1;
this.max_index = this.imgCach_arr.length;
}catch(e){
console.log(e)
}

2.回退方法

reBack_fun(e){
console.log('1111',e)
let _this = this;
if(this.redo_index > 0){
let socketMessage = this.redo_index; //向当事人传输数组的下标
let _index = --this.redo_index;
this.redo_index = _index;
this.socket.emit('upSerRedoArr',socketMessage);
let _img = new Image();
_img.src = '';
_img.src = this.imgCach_arr[_index];
_img.onload = function(){
_this.ctx.drawImage(_img,0,0);
}
}
},

Answer 2

可以只记录被影响的那个部分像素，getImageData取一个矩形的像素，不用取整个页面。

Answer 3

有一个现成的库貌似做的很好了：https://github.com/magicien/u...

Answer 4

感觉还是清除后重新绘制比较好，一般操作步骤我们保存的都是数据，就好像canvas游戏一样的。比如说场景1我们有：
一个菜单按钮，一个导航栏，一个背景部分，一个角色绘制等等，
跳到场景2我们有：
一个物品栏，一些物品。。
我们对场景1进行保存只保存对应的数据，不用保存图片什么的，因为有些操作事件（点击等）没办法触发。。当我们从场景2回到场景1时，按照程序界面生成流程重新过一遍就行。比如说：先绘制菜单，再绘制背景等等，按这顺序进行下去即可，而这些也是可以一开始就在代码里准备好的，剩下的只是一个命令罢了。