Domanda
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?
Soluzione
È 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>
Altri suggerimenti
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.
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.