Javascript 图形应用程序撤消按钮

我的绘图应用程序的“撤消”按钮有问题

<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”）；
函数cPush（）{
cStep++；
如果（cStep0）{
cStep--；
var canvasPic=新图像（）；
canvasPic.src=cPushArray[cStep]；
canvasPic.onload=函数（）{ctx.drawImage（canvasPic，0，0）；}
}
}

---

但这不起作用。请帮助

第一句话：如@markE下划线所示，使用DataURL保存会占用大量内存。您可以考虑在数组中保存绘制命令+它们的参数。 寻找关于这个主题的tuts/Stack-Overflow帖子，在一些帖子中，你应该会得到一些不错的想法

无论如何，您可以在第一时间使用dataURL解决方案使您的应用程序正常工作（限制为20次撤消，或者类似于避免内存爆炸），然后您可以在以后改进撤消以达到更高的限制。
我更新了代码来处理这样的堆栈限制

对于您的问题：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); 
}

---

只需在每行/函数之前添加注释，以解释它在做什么。一些bug应该已经消失了。如果

ctx

不可用，您将无法使用

drawImage

方法defined@GameAlchemist添加评论将如何使bug消失？@epascarello:因为你看到你打算做的并不是你实际做的。而你的回答确实帮助提问者解决当前问题设计时，您可能会让提问者知道，使用.toDataURL以增量方式保存画布非常耗费资源——除了在边缘情况下，这可能不是一个好的设计。@markE:我以为这是接下来的几个步骤之一，但是的，为什么现在不提这个呢？：我更新了我的帖子，谢谢。

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