Question

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

我该怎么做？

Answer 1

将数据网址保存到数组中：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（或您感兴趣的事件）时填充它。这样，您就拥有了所有用户输入的历史记录。

您也可以代替仅存储事件，与它们一起存储正在使用的工具，以简化之前状态下的重绘。

这就是你想要的吗？

HTML5画布的变化历史

2 个答案: