Geschichte der Veränderungen von HTML5 -Leinwand

Question

Ich entwickle HTML5 -basierte Farbanwendung mit Canvas und jetzt möchte ich Geschichte aller Canvas -Änderungen vornehmen. Ich meine eine Geschichte von Benutzeraktionen.

Wie kann ich das machen?

Answer 1

Speichern Sie die Daten -URLs in ein 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

Sie können versuchen, eine Reihe von Ereignissen zu erstellen und sie jedes Mal zu füllen, in dem Ihr Onklick (oder die Ereignisse, die Sie interessieren) stattfinden. Auf diese Weise haben Sie eine Geschichte aller Benutzereingaben.

Sie können auch anstatt die Ereignisse zu speichern, mit ihnen das verwendete Tool zu speichern, um das Neubau in einem früheren Zustand zu vereinfachen.

Ist es das was du wolltest ?