Salvare il contenuto <canvas> da ridisegnare in fotogrammi di animazione successivi?

Question

Sto disegnando un grafico su un <canvas> che richiede calcoli costosi. Mi piacerebbe creare un'animazione (quando si sposta il mouse sulla tela) dove il grafico è immutabile, ma su di esso sono disegnati altri oggetti.

Poiché la tela dovrà essere ridisegnata molto, non voglio eseguire i calcoli per rendere il grafico per ogni fotogramma. Come posso disegnare il grafico una volta, salvarlo, e quindi usare il rendering salvato per ridisegnare i fotogrammi successivi dell'animazione, in modo che i calcoli costosi debbano avvenire solo una volta che ho ridisegnato lo & è il livello di animazione molto più semplice?

Ho provato disegnando il grafico su una seconda tela & quindi utilizzando ctx.drawImage() renderla sulla tela principale, ma disegnando sulla tela non sembra funzionare a meno che sia nel Regno & non display:none;. Devo fare qualcosa di hacky come posizionare la tela temp fuori dalla vista, o c'è un modo più pulito per farlo?

Answer 1

È necessario utilizzare almeno 2 tele: una con il disegno complesso e la seconda, sopra la prima (con le stesse dimensioni, posizionata in assoluto), con le forme animate. Questo metodo funziona su IE e getImageData non funziona con ExCanvas.

Ogni libreria che esegue disegni complessi su tele utilizza questo metodo (Flot e altri).

<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

Ho dovuto apportare alcune modifiche alla libreria di grafici flot.js. Sono sicuro al 99% che usi tele sovrapposte. C'è un livello grafico e uno strato di sovrapposizione. Puoi guardare il codice sorgente.

Answer 3

ne dite di disegnare il grafico per la prima volta sulla tela e poi

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

e poi

ctx.putImageData(imdata, 0,0); 

per il resto del rendering.