¿Guardar <canvas> contenidos para volver a dibujar en cuadros de animación posteriores?

Question

Estoy dibujando un gráfico en un <canvas> que requiere cálculos caros. Me gustaría crear una animación (al mover el mouse sobre el lienzo) donde el gráfico no cambia, pero algunos otros objetos se dibujan sobre él.

Como el lienzo tendrá que volver a dibujarse mucho, no quiero realizar los cálculos para representar el gráfico para cada fotograma. ¿Cómo puedo dibujar el gráfico una vez, guardarlo y luego usar el renderizado guardado para volver a dibujar los fotogramas posteriores de la animación, de modo que los costosos cálculos solo tengan que ocurrir una vez que & todo lo que tengo que volver a dibujar sea la capa de animación mucho más simple?

he intentado dibujar el gráfico en un segundo lienzo & a continuación, utilizando ctx.drawImage() para hacerlo en el lienzo principal, pero el dibujo en el lienzo no parece funcionar a menos que sea en el Reino & no display:none;. ¿Tengo que hacer algo hacky como posicionar el visor temporal fuera de la vista, o hay una manera más limpia de hacerlo?

Answer 1

Debe usar al menos 2 lienzos: uno con el dibujo complejo y el segundo, sobre el primero (con el mismo tamaño, posicionado en absoluto), con las formas animadas. Este método funcionará en IE, y getImageData no funciona con ExCanvas.

Cada biblioteca que hace dibujos complejos en lienzos usa 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

Tuve que hacer algunos cambios en la biblioteca de gráficos flot.js. Estoy 99% seguro de que usa lienzos superpuestos. Hay una capa de gráfico y una capa de superposición. Puedes mirar el código fuente.

Answer 3

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

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

y luego

ctx.putImageData(imdata, 0,0); 

para el resto de la prestación.