Question

我正在尝试实现一个html5绘图应用。目前，我可以允许保存绘制的图像。我希望能够有一个重播功能，重绘图像的方式与最初绘制的方式相同，就好像它是一个视频一样。有什么想法吗？

Answer 1

画布没有像乔尼所说的DOM树。 Canvas绘制像素，因此在绘制单个对象后无法检索或移动它们。

您可以使用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

我认为任何导致绘制到画布的动作都只是保存在有序数组中。

然后您可以单步执行数组并重复。

带有“重播”功能的HTML5绘图“

2 个答案: