HTML5 canvas更改的歷史記錄

我正在使用canvas開發基於HTML5的繪畫應用程序，現在我想要對所有canvas的更改進行記錄。我的意思是用戶行爲的歷史。HTML5 canvas更改的歷史記錄

我該怎麼做？

2011-07-24 Mark

將數據網址保存到數組中：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(); 
});

來源

2011-07-24 11:30:19 pimvdb

你認爲，那不會有與RAM問題？如果用戶將執行很多操作.. – Mark

@Mark：這是正確的，具體取決於您的畫布大小。但是，每個動作都會佔用相同的內存量，因爲只保存像素（繪圖的複雜程度無關緊要，只是大小很重要）。我的小提琴不會阻塞太多的記憶。 – pimvdb

謝謝你，非常感謝你 – Mark

你可能會嘗試做的是創建一個事件數組，並在每次onclick（或您最感興趣的事件）發生時填充它。這樣，您就擁有了所有用戶輸入的歷史記錄。

您也可以不僅僅存儲事件，而是存儲正在使用的工具，以簡化之前狀態下的重繪。

這就是你想要的嗎？

來源

2011-07-24 11:29:51

雖然這是我的第一個念頭爲好，這可能會傷害撤銷過程（強迫你一遍重做整個用戶操作） – sternr

HTML5 canvas更改的歷史記錄

回答

相關問題