HTML5 canvas绘图的redo和undo功能的实现

查看演示 下载地址

在前面我们学会了如何使用html5 canvas制作涂鸦画板，那么能不能实现像windows画图板或Photoshop的redo和undo功能呢？答案是肯定的，本教程中我们将来实现它。

为了实现canvas的redo/undo功能，我们需要保存canvas的快照（通过canvas的toDataURL方法来实现），将每一个快照都存储在一个数组cPushArray中，当我们每次往canvas中绘制线条的时候，我们都使用一个cPush方法来往数组中存储快照。

如果cPush方法被调用，而当前的操作又不是最好的位置，数组将自动增长。在当前位置之后的数组记录将被全部删除。

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

当我们点击了undo按钮，cUndo方法将被调用，并使用drawImage方法显示前一个绘图状态：

function cUndo() {
    if (cStep > 0) {
        cStep--;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
    }
}                                
                            

当用户点击了redo按钮，cRedo方法将被调用，并使用drawImage方法显示在cPushArray数组中的下一个可用的绘图状态：

function cRedo() {
    if (cStep < cPushArray.length-1) {
        cStep++;
        var canvasPic = new Image();
        canvasPic.src = cPushArray[cStep];
        canvasPic.onload = function () { ctx.drawImage(canvasPic, 0, 0); }
    }
}                                
                            

这些都是非常简单的方法，但是如果不是使用基于对象的canvas来制作，那么你就需要更加复杂的方法来实现对象的保存和恢复。That's all！希望对你有所帮助！

查看演示 下载地址