Сохранить содержимое <canvas> для перерисовки в последующих кадрах анимации?

Question

Я рисую график на <canvas> это требует дорогостоящих расчетов.Я хотел бы создать анимацию (при перемещении мыши по холсту), где график не меняется, но поверх него рисуются какие-то другие объекты.

Поскольку холст придется часто перерисовывать, я не хочу выполнять вычисления для рендеринга графика для каждого кадра.Как я могу нарисовать график один раз, сохранить его, а затем использовать сохраненный рендеринг для перерисовки последующих кадров анимации, чтобы дорогостоящие вычисления выполнялись только один раз, и все, что мне нужно перерисовать, — это гораздо более простой слой анимации?

Я попытался нарисовать график на втором холсте, а затем использовать ctx.drawImage() чтобы отобразить его на основном холсте, но рисование на холсте, похоже, не работает, если оно не находится в dom и не display:none;.Нужно ли мне делать что-то хакерское, например, убрать временное полотно из поля зрения, или есть более чистый способ сделать это?

Answer 1

Вам необходимо использовать как минимум 2 холста:один со сложным рисунком, а второй, поверх первого (того же размера, в абсолютном положении), с анимированными фигурами.Этот метод будет работать в IE, а getImageData не работает с ExCanvas.

Каждая библиотека, которая делает сложные рисунки на холстах, использует этот метод (Флот и другие).

<div style="width: 600px; height: 300px; position: relative;" id="container">
  <canvas class="canvas" style="position: absolute; left: 0px; top: 0px;" width="600" height="300"/>
  <canvas class="overlay" style="position: absolute; left: 0px; top: 0px;" width="600" height="300"/>
</div>

Answer 2

Как насчет того, чтобы сначала нарисовать график на холсте, а затем

var imdata = ctx.getImageData(0,0,width,height);

а потом

ctx.putImageData( imdata, 0,0);

для остальной части рендеринга.

Answer 3

Мне пришлось внести некоторые изменения в флот.js библиотека диаграмм.Я на 99% уверен, что здесь используются перекрывающиеся холсты.Есть слой диаграммы и слой наложения.Вы можете посмотреть исходный код.