История изменений HTML5 canvas - PullRequest
Новая
       6

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

1 голос
/ 24 июля 2011

Я разрабатываю приложение для рисования на основе HTML5, используя холст, и теперь я хочу сделать историю всех изменений холста. Я имею в виду историю действий пользователя.

Как я могу это сделать?

Ответы [ 2 ]

1 голос
/ 24 июля 2011

Сохранение 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();
});
0 голосов
/ 24 июля 2011

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

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

...