Speichern <canvas> Inhalte in späteren Animationsrahmen neu gezeichnet werden?

Question

Ich zeichne ein Diagramm auf eine <canvas>, die teure Berechnungen erfordert. Ich möchte eine Animation erstellen (wenn die Maus über die Zeichenfläche bewegt wird), wo sich der Graph nicht ändert, aber einige andere Objekte darüber gezeichnet werden.

Da das Canvas neu gezeichnet werden muss, möchte ich die Berechnungen nicht durchführen, um das Diagramm für jeden Frame zu rendern. Wie kann ich das Diagramm einmal zeichnen, speichern und dann das gespeicherte Rendering verwenden, um nachfolgende Bilder der Animation neu zu zeichnen, so dass die teuren Berechnungen nur einmal durchgeführt werden müssen & alles, was ich neu zeichnen muss, ist die viel einfachere Animationsebene?

Ich habe versucht, die Grafik auf einer zweiten Leinwand Zeichnung & dann ctx.drawImage() mit ihm auf die Haupt Leinwand zu machen, aber auf der Leinwand Zeichnung scheint nicht zu funktionieren, wenn es & nicht display:none; im dom ist. Muss ich etwas Hackiges tun, wie die Temp-Leinwand aus dem Blickfeld zu bringen, oder gibt es einen saubereren Weg, dies zu tun?

Answer 1

Sie müssen mindestens 2 Leinwände verwenden: eine mit der komplexen Zeichnung, und die zweite, über der ersten (mit der gleichen Größe, absolut positioniert), mit den animierten Formen. Diese Methode funktioniert mit IE, und getImageData funktioniert nicht mit ExCanvas.

Jede Bibliothek, die komplexe Zeichnungen auf Leinwänden ausführt, verwendet diese Methode (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

Ich musste ein paar Änderungen an der Charting-Bibliothek flot.js vornehmen. Ich bin mir zu 99% sicher, dass es überlappende Leinwände verwendet. Es gibt eine Diagrammschicht und eine Überlagerungsschicht. Sie können sich den Quellcode ansehen.

Answer 3

Wie sei 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.