首頁猿問 canvas 如何進行回退操作？

canvas 如何進行回退操作？

JavaScript

溫溫醬 2019-03-13 13:15:58

1.在開發(fā)canvas程序時，需要回退操作。我個人是在onmouseup事件時，獲取使用getImageData()獲取頁面的所有像素點。2.在觸發(fā)回退事件時，調(diào)取putImageData()將點賦值到頁面。問題：在賦值到頁面時，速度比較慢。有沒有好的方法解決這個問題。

查看完整描述

4 回答

飲歌長嘯

TA貢獻1951條經(jīng)驗獲得超3個贊

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);

}

},

反對回復(fù) 2019-03-18

慕神8447489

TA貢獻1780條經(jīng)驗獲得超1個贊

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

反對回復(fù) 2019-03-18

慕標(biāo)5832272

TA貢獻1966條經(jīng)驗獲得超4個贊

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

反對回復(fù) 2019-03-18