La storia dei cambiamenti di HTML5 canvas

Question

Sto sviluppando l'applicazione della vernice a base HTML5 utilizzando tela, e ora voglio fare la storia di tutte le modifiche di tela. Insomma una storia di azioni dell'utente.

Come posso fare questo?

Answer 1

Salvataggio gli URL di dati in un array: 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

Cosa si può provare a fare è la creazione di una serie di eventi, e riempire ogni volte il vostro onclick (o gli eventi wich vi interessano) accadere. in questo modo, si ha una storia di tutti gli input dell'utente.

Potrebbe invece di memorizzare gli eventi solo, negozio con loro lo strumento utilizzato, per semplificare il ridisegno ad uno stato precedente.

E 'questo quello che volevi?