不要。

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，但是再一次，仅当绘制这一帧花费的时间超过16ms时才应使用此选项。

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

1 个答案:

不要。