如何将 HTML5 画布作为图像存储在框架列表中？

Question

尝试为 HTML5 游戏制作简单的动画引擎。我在顶部有一个时间线，由帧预览和一个带有火柴人的线框编辑器组成，用于在更大的底部画布上进行测试。

当我切换帧时，我使用 drawImage() 将底部画布复制到顶部的小帧预览中。

有没有办法将底部画布的当前状态保存在一个数组中（每个项目对应于每个帧），以便我可以使用 drawImage() 将它们放置为洋葱皮？

如果您想直观地查看项目，请查看以下项目： https://jsfiddle.net/incon/owrj7e5z/

（如果你看一下这个项目，它还没有真正工作，这是一项正在进行中的大工作，而且非常有问题）

这是我正在尝试的，它适用于预览，但不会在底部画布上重绘为洋葱皮。

var framePreviews = [undefined,undefined,undefined....];
var c = document.getElementById('bottomCanvas');
var tContext = document.getElementById('timelineCanvas').getContext('2d');
framePreviews[simulation.currentFrame] = c; // save canvas in an array
tContext.drawImage(framePreviews[simulation.currentFrame], simulation.currentFrame*60, 0, 60, 60/c.width*c.height); // draw the canvas 60px wide in the timeline

Answer 1

不要。

图像真的很重，无论您选择哪种保存方式，总会有至少一次全尺寸画布的 ImageBitmap 需要存储在浏览器的内存中，并且在几帧中，你会把它吹灭的。

您无需在应用中进行任何繁重的计算，因此您无需将这些存储为图像。

而只是保存绘图命令，每次都重做绘图。

---

现在，对于那些必须保存计算量大的帧的人来说，最好是从你的画布到generate an ImageBitmap，但同样，只有在绘制这一帧需要超过 16 毫秒时才应该使用它。