Guardar contenidos a ser nuevamente cuadros de animación posteriores?

Question

Estoy dibujando un gráfico en una <canvas> que requiere cálculos caros. Me gustaría crear una animación (al mover el ratón por el lienzo), donde la gráfica es inmutable, pero algunos otros objetos se dibujan sobre ella.

Debido a que la tela tendrá que volver a dibujar mucho, no quiero para realizar los cálculos para representar el gráfico para cada cuadro. ¿Cómo se dibuja el gráfico de una vez, guardarlo, y luego usar los salvados renderizado para volver a dibujar los fotogramas posteriores de la animación, por lo que los cálculos costosos sólo tienen que pasar una vez y todo lo que tengo que volver a dibujar es la capa de la animación mucho más simple?

He intentado dibujar el gráfico en un segundo lienzo y luego usando ctx.drawImage() para hacerlo en el lienzo principal, pero el dibujo en el lienzo no parecen funcionar a menos que sea en el Reino y no display:none;. ¿Tengo que hacer algo hacky como la posición de la lona los temporales fuera de la vista, o hay una forma más limpia de hacer esto?

Answer 1

Es necesario utilizar al menos 2 lienzos: una con el dibujo complejo, y el segundo, en la parte superior de la primera (con el mismo tamaño, posicionado en absoluto), con las formas animadas. Este método funciona en IE, y getImageData no funciona con ExCanvas.

Cada biblioteca que hace dibujos complejos en lienzos utilizar este método (Flot y otros).

<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

¿Qué hay de dibujo gráfico de su primera vez en el lienzo y luego

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

y

ctx.putImageData( imdata, 0,0);

para el resto de la prestación.

Answer 3

he tenido que hacer algunos cambios en el href="http://code.google.com/p/flot/" rel="nofollow noreferrer"> flot.js biblioteca