繪圖應用程序撤消按鈕

Question

我有撤銷按鈕的問題我的繪圖應用程序

<input id="undo" type="image" src="images/undo.ico" onclick="cUndo()" width="25" height="25"> 

var cPushArray = new Array(); 
var cStep = -1; 
var ctx; 
// ctx = document.getElementById('myCanvas').getContext("2d"); 

function cPush() { 
    cStep++; 
    if (cStep < cPushArray.length) { cPushArray.length = cStep; } 
    cPushArray.push(document.getElementById('myCanvas').toDataURL()); 
} 
function cUndo() { 
    if (cStep > 0) { 
     cStep--; 
     var canvasPic = new Image(); 
     canvasPic.src = cPushArray[cStep]; 
     canvasPic.onload = function() { ctx.drawImage(canvasPic, 0, 0); } 
    } 
} 

但這並不work.Please幫助

Answer 1

的第一句話：作爲@markE強調，使用DataURL進行保存具有很高的內存成本。您可能會考慮將繪圖命令及其參數保存在數組中。
尋找tuts /堆棧溢出帖子的話題，出了幾個帖子，你應該得到一些不錯的想法。

無論如何，您可以在第一次使用dataURL解決方案來讓您的應用程序正常工作（限制爲20個undos或避免內存爆炸），然後您可以稍後改進撤消以達到更高限制。
我更新了我的代碼來處理這樣的堆棧限制。

對於你的問題：onload應該在設置src之前掛鉤，但無論如何用DataURL你不是異步的：圖像是一次構建的，所以不需要掛載卸載。

var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext("2d"); 

var historic = []; 
var maxHistoricLength = 20; // might be more or less, depending on canvas size... 

function saveForUndo() { 
    historic.push(canvas.toDataURL()); 
    if (historic.length === maxHistoricLength +1) historic.shift(); 
} 

function canUndo() { 
    return (historic.length !== 0); 
} 

function undo() { 
    if (!canUndo()) return; 
    var lastDataURL = historic.pop(); 
    var tmpImage = new Image(); 
    tmpImage.src = lastDataURL; 
    ctx.drawImage(tmpImage, 0, 0); 
}