HTML5 drawing with「replay」feature「

Question

我試圖實現一個html5繪圖應用程序。目前，我可以允許繪製的圖像被保存。我想能夠有一個重新繪製圖像的重播功能相同它的原始繪製方式幾乎就像是一個視頻任何想法？

Answer 1

畫布沒有DOM樹，因爲joni的建議。畫布繪製像素，所以在繪製完成後無法檢索或移動單個對象

您可以使用canvas.getImageData（）將數組保存到一個數組，然後使用canvas.putImageData（）以相同的順序恢復這些數據框雖然我不確定它是如何執行的大帆布尺寸。

樣品：

// Start with an array where you'll save all frames. 
var frames = []; 

// Save the output of your canvas to the frames array. Do this every X seconds or X amount of drawing. 
var frame = myCanvasElement.getImageData(0, 0, myCanvasElement.width, myCanvasElement.height); 
frames.push(frame); 

// When the user is done drawing, you can do a replay by restoring the frames one by one in a certain interval. 
var fps = 15; 
var i = 0; 
var myInterval = setInterval(function() 
{ 
    myCanvasElement.putImageData(frames[i], 0, 0); 

    i++; 
    if (i == frames.length) 
    { 
     // We've played all frames. 
     clearInterval(myInterval); 
    } 
}, 1000/fps); 

Answer 2

我認爲，導致繪圖畫布，你只需保存在一個有序陣列的任何行動。

然後，您可以遍歷數組並重復。