Speichern Sie Inhalte in späteren Animations-Frames neu gezeichnet werden?

Question

Ich zeichne ein Diagramm auf einem <canvas> die teure Berechnungen erfordert. Ich möchte eine Animation erstellen (wenn Sie die Maus über die Leinwand bewegt), wo der Graph unveränderlich ist, aber einige andere Aufgaben werden darüber gezogen.

Da wird die Leinwand viel neu gezeichnet werden muß, ich will nicht, um die Berechnungen auszuführen, um die grafische Darstellung für jeden Rahmen zu machen. Wie kann ich einmal die Grafik zeichnen, speichern und verwenden Sie dann die gespeicherte Rendering nachfolgende Frames der Animation neu zu ziehen, so dass die teueren Berechnungen nur einmal geschehen haben und alles, was ich neu zeichnen muß, ist die viel einfachere Animation Schicht?

Ich habe versucht, die Grafik auf einer zweiten Leinwand zeichnen und dann ctx.drawImage() mit ihm auf die Haupt Leinwand zu machen, aber auf der Leinwand Zeichnung scheint nicht zu funktionieren, wenn es in der dom ist und nicht display:none;. aus Sicht muß ich etwas hacky wie Position Leinwand der Temperatur tun, oder gibt es einen sauberen Weg, dies zu tun?

Answer 1

Sie müssen mindestens 2 Leinwände benutzen: eine mit der komplexen Zeichnung, und die zweiten, auf den ersten (mit der gleichen Größe, in absoluten positionierte), mit den animierten Formen. Diese Methode wird auf IE arbeiten, und getImageData funktioniert nicht mit excanvas.

Jede Bibliothek, die komplexen Zeichnungen auf Leinwände macht diese Methode verwenden (Flot und andere).

<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

Wie wäre Ihr Diagramm zum ersten Mal auf der Leinwand zeichnen und dann

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

und dann

ctx.putImageData( imdata, 0,0);

für den Rest des Rendering.

Answer 3

Ich musste ein paar Änderungen an der flot.js Charting-Bibliothek. Ich bin 99% sicher, dass es überlappende Leinwände verwendet. Es gibt eine Diagrammschicht und eine Deckschicht. Sie könnten den Quellcode sehen.