时间戳

首页 > 解决方案 > 如何将 HTML5 画布作为图像存储在框架列表中？

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

问题描述

尝试为 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

标签： javascripthtmlcanvas

解决方案

不。

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

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

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

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

推荐阅读