HTML5-Canvas implementiert eine einfache doppelte Pufferung

Es gibt viele interessante Dinge auf dem HTML5-Canvas, wie zum Beispiel das Anfordern von Animations-Frameworks und das Erstellen von Animationen mit JavaScript. Freunde in Not können einen Blick auf die Methoden werfen Artikel.

Für fortgeschrittenere Inhalte möchten Sie möglicherweise Canvas verwenden, das normalerweise GPU-beschleunigt ist und mit window.request.tionFrame relativ hohe und stabile Bildraten ermöglicht. (Empfohlener Kurs: HTML5-Video-Tutorial)

Wenn Sie einen doppelten Puffer auf der Leinwand benötigen, besteht ein beliebter Ansatz darin, ein zweites Leinwandelement zu erstellen und auf dieses Leinwandelement zu zeichnen. Anschließend verwenden Sie drawImage Um das fertige Bild auf die Hauptleinwand zu zeichnen, sieht das Ergebnis wie folgt aus:

var primaryCtx = document.getElementById("canvas").getContext("2d");
var secondaryCanvas = document.createElement("canvas"),
      secondaryCtx = secondaryCanvas.getContext("2d");
      (function drawFrame() {
    requestAnimationFrame(drawFrame);
    secondaryCtx.fillStyle = "#f00";
    secondaryCtx.fillRect(10,10,20,20);
    primaryCtx.drawImage(secondaryCanvas);
    })();

Geben Sie CTX.SAVER() und CTX.Rebug() ein

Heute habe ich herausgefunden, dass es einen saubereren Weg gibt , Funktioniert genauso gut wie die obige Methode:

(function drawFrame() {
    requestAnimationFrame(drawFrame);
    primaryCtx.save(); //Freeze redraw
    primaryCtx.fillStyle = "#f00";
    primaryCtx.fillRect(10,10,20,20);
    primaryCtx.restore(); //And now do the redraw
    })();

Trotz des seltsamen Namens friert sie einfach die Darstellung des Kontexts ein und setzt sie dann fort, nachdem das Zeichnen abgeschlossen ist.

Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie in der zugehörigen Spalte Video-Tutorial auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonHTML5-Canvas implementiert eine einfache doppelte Pufferung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!