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

我认为，导致绘图画布，你只需保存在一个有序阵列的任何行动。

然后，您可以遍历数组并重复。