Salva contenuti da ridisegnati in fotogrammi di animazione più tardi?

Question

sto disegnando un grafico su uno <canvas> che richiede calcoli costosi. Vorrei creare un'animazione (quando si sposta il mouse sulla tela), dove il grafico è immutabile, ma alcuni altri oggetti vengono disegnati su di esso.

Perché la tela dovrà essere ridisegnata molto, non voglio per eseguire i calcoli per il rendering grafico per ogni fotogramma. Come posso disegnare il grafico una volta, salvarlo, e quindi utilizzare i salvati di rendering di ridisegnare fotogrammi successivi dell'animazione, in modo che i calcoli costose hanno accadere solo una volta e tutto quello che devo ridisegnare è lo strato di animazione molto più semplice?

Ho provato disegnando il grafico su una seconda tela e quindi utilizzando ctx.drawImage() renderla sulla tela principale, ma disegnando sulla tela non sembra funzionare a meno che sia nel Regno e non display:none;. Devo fare qualcosa di hacky come la posizione delle tele temporanei fuori dal campo visivo, o c'è un modo più pulito per fare questo?

Answer 1

È necessario utilizzare almeno 2 tele: una con il complesso disegno, e la seconda, sulla parte superiore del primo (con le stesse dimensioni, posizionato in assoluto), con le forme animate. Questo metodo funziona su IE, e getImageData non funziona con ExCanvas.

Ogni biblioteca che fa disegni complessi su tele utilizzare 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

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

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

e quindi

ctx.putImageData( imdata, 0,0);

per il resto del rendering.

Answer 3

ho dovuto fare alcune modifiche al flot.js biblioteca grafici. Sono sicuro al 99% che utilizza tele sovrapposte. C'è uno strato grafico e uno strato di sovrapposizione. Si poteva guardare il codice sorgente.