Как сохранить холст 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 вашего полноразмерного холста, который необходимо будет сохранить.в памяти вашего браузера и в нескольких кадрах вы его выбросите.

Вы не выполняете никаких тяжелых вычислений в своем приложении, поэтому вам не нужно хранить их как изображения.

Вместо этого только сохраняйте команды рисования и каждый раз повторяйте чертежи.

---

Теперь для тех, кому действительно нужно сохранять тяжелые в вычислительном отношении кадры, тогдаЛучше всего сгенерировать ImageBitmap из вашего холста, но еще раз, это следует использовать, только если рисование этого одного кадра занимает более 16 мс.