canvas 如何進行回退操作？

1.在觸發(fā)onmouseup事件存儲數(shù)據(jù)

try{
//存取畫板的筆畫
this.imgCach_arr.push($('#canvas')[0].toDataURL());
console.log('base64流長度',($('#canvas')[0].toDataURL().length)/1024,'KB')
//將存取的數(shù)據(jù)發(fā)送給當(dāng)事人
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; //向當(dāng)事人傳輸數(shù)組的下標(biāo)
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);
}
}
},

可以只記錄被影響的那個部分像素，getImageData取一個矩形的像素，不用取整個頁面。

感覺還是清除后重新繪制比較好，一般操作步驟我們保存的都是數(shù)據(jù)，就好像canvas游戲一樣的。比如說場景1我們有：
一個菜單按鈕，一個導(dǎo)航欄，一個背景部分，一個角色繪制等等，
跳到場景2我們有：
一個物品欄，一些物品。。
我們對場景1進行保存只保存對應(yīng)的數(shù)據(jù)，不用保存圖片什么的，因為有些操作事件（點擊等）沒辦法觸發(fā)。。當(dāng)我們從場景2回到場景1時，按照程序界面生成流程重新過一遍就行。比如說：先繪制菜單，再繪制背景等等，按這順序進行下去即可，而這些也是可以一開始就在代碼里準(zhǔn)備好的，剩下的只是一個命令罷了。

有一個現(xiàn)成的庫貌似做的很好了：https://github.com/magicien/u...