history - HTML5画布的变化史

Question

我正在使用画布开发基于 HTML5 的绘图应用程序，现在我想做所有画布更改的历史记录。我的意思是用户操作的历史。

我怎样才能做到这一点？

Answer 1

将数据 url 保存到数组中：http: //jsfiddle.net/eGjak/54/。

var cv  = $('#cv').get(0);
var ctx = cv.getContext('2d');

var history = [];

$("#b1").click(function() {
    history.push(cv.toDataURL());

    ctx.beginPath();

    ctx.arc(Math.random() * 200 + 100,
            Math.random() * 200 + 100,
            Math.random() * 200,
            0,
            2 * Math.PI);

    ctx.stroke();
});

$("#b2").click(function() {
    ctx.beginPath();

    var img = new Image;

    img.onload = function() {
        ctx.clearRect(0, 0, 400, 400);
        ctx.drawImage(img, 0, 0);
    };

    img.src = history.pop();
});

Answer 2

您可能会尝试做的是创建一个事件数组，并在每次您的 onclick（或您感兴趣的事件）发生时填充它。这样，您就有了所有用户输入的历史记录。

您也可以不只存储事件，而是将正在使用的工具与它们一起存储，以简化在先前状态下的重绘。

那是你想要的吗？