История изменений HTML5 canvas

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

То, что вы можете попытаться сделать, - это создать массив событий и заполнять его каждый раз, когда происходит ваш клик (или события, которые вас интересуют).таким образом, у вас есть история всех пользовательских вводов.

Вы также можете вместо сохранения только событий сохранять вместе с ними используемый инструмент для упрощения перерисовки в предыдущем состоянии.* Это то, что вы хотели?