Enregistrer contenu à redessinées dans des cadres d'animation plus tard?

Question

Je dessine un graphique sur un qui nécessite des calculs <canvas> coûteux. Je voudrais créer une animation (lors du déplacement de la souris sur la toile) où le graphique est immuable, mais d'autres objets sont tirés dessus.

Parce que la toile devra être redessinée beaucoup, je ne veux pas effectuer les calculs pour rendre le graphique pour chaque image. Comment puis-je dessiner le graphique une fois, l'enregistrer, puis utilisez la recherche enregistrée rendu pour redessiner les images suivantes de l'animation, de sorte que les calculs coûteux ne doivent se produire une fois et tout ce que je dois redessiner est la couche d'animation beaucoup plus simple?

J'ai essayé dessiner le graphique sur une seconde toile et puis en utilisant pour le rendre ctx.drawImage() sur la toile principale, mais le dessin sur la toile ne semble pas fonctionner à moins que ce soit dans le Royaume et non display:none;. Est-ce que je dois faire quelque chose aki comme la position la toile temp hors de la vue, ou est-il un moyen de le faire? Propre

Answer 1

Il faut utiliser au moins 2 toiles: l'un avec le dessin complexe, et le second, au-dessus de la première (avec la même taille, positionné en absolu), avec les formes animées. Cette méthode fonctionne sur IE, et getImageData ne fonctionne pas avec excanvas.

Chaque bibliothèque qui dessins complexes sur des toiles utilisent cette méthode (Flot et autres).

<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

Que diriez-vous dessiner votre graphique la première fois sur votre toile puis

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

et

ctx.putImageData( imdata, 0,0);

pour le reste du rendu.

Answer 3

Je devais faire quelques changements à la bibliothèque flot.js . Je suis sûr à 99% qu'il utilise des toiles qui se chevauchent. Il y a une couche graphique et une couche de recouvrement. Vous pouvez regarder le code source.