history - HTML5 キャンバスの変更履歴

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

あなたがしようとしているのは、イベントの配列を作成し、onclick (または興味のあるイベント) が発生するたびにそれを埋めることです。このようにして、すべてのユーザー入力の履歴を取得できます。

イベントのみを保存する代わりに、使用中のツールを一緒に保存して、以前の状態での再描画を簡素化することもできます。

それはあなたが望んでいたものですか？