30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. Animation
Code

HTML5 Canvas-Optimierung: Ein praktisches Beispiel 

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Wilhelm Wolf (you can also view the original English article)

Wenn Sie getan haben JavaScript-Entwicklung lange genug, haben Sie wahrscheinlich crashed Sie Ihren browser ein paar mal. Das problem in der Regel stellt sich heraus, dass einige JavaScript-Fehler, wie eine endlose while-Schleife; wenn nicht, ist der nächste verdächtige ist die Seite von Transformationen oder Animationen - die Art, die beinhalten das hinzufügen und entfernen von Elemente aus der Webseite oder das animieren von CSS-Eigenschaften.   Dieses tutorial konzentriert sich auf die Optimierung der Animationen erzeugt mit JS und HTML5 - - element.

Dieses tutorial beginnt und endet mit dem, was die HTML5-animation widget, das Sie unten sehen: 

Wir nehmen Sie mit auf eine Reise, die Erkundung der verschiedenen schwellen-Leinwand-Optimierung Tipps und Techniken und wenden Sie Sie auf die widget-JavaScript-source-code. Das Ziel ist die Verbesserung auf dem widget die Ausführung, die Geschwindigkeit und am Ende eine glattere, mehr Flüssigkeit animation widget, angetrieben durch schlankere, effizientere JavaScript. 

Der source-download-enthält die HTML-und JavaScript von jedem Schritt im tutorial, so können Sie entlang Folgen von jedem Punkt. 

Nehmen wir den ersten Schritt. 


Schritt 1: Spielen Sie den Film-Anhänger 

 Das widget oben ist auf der Grundlage der Film-trailer zu Sintel, ein 3D-Animationsfilm der Blender Foundation. Es ist gebaut mit Hilfe von zwei HTML5 beliebtesten Ergänzungen: das und - Elemente.

 Das - lädt und spielt die Sintel video-Datei, während das erzeugt seine eigene animation Sequenz von Momentaufnahmen der Wiedergabe von Videos und mischen es mit text und anderen Grafiken. Wenn Sie klicken, um das video abzuspielen, wird die Leinwand zu neuem Leben erweckt, mit einem dunklen hintergrund, der eine größere schwarze und weiße Kopie der Wiedergabe von video.  Kleinere, farbige screen-shots des Videos kopiert werden, um die Szene, und gleiten über die es als Teil einer Filmrolle, illustration.

 In der linken oberen Ecke, wir haben den Titel und ein paar Zeilen beschreibenden text, fade in und out, während die animation spielt.  Das Skript ist Leistung, Geschwindigkeit und verwandten Metriken sind Teil der animation, in der kleinen schwarzen box in der linken unteren Ecke mit einem Diagramm und lebendigen text. Wir werden uns an dieser besonderen Sache im detail später.

 Schließlich gibt es einen großen, sich drehenden Klinge, die fliegt über die Szene am Anfang der animation, dessen Grafik geladen wird, eine externe PNG-Bild-Datei.


Schritt 2: die Quelle Anzeigen 

 Der Quellcode enthält die übliche Mischung von HTML, CSS und Javascript. Die HTML ist spärlich: nur die und - tags eingeschlossen in einem container :

 Der container eine ID (animationWidget), die fungiert als einen Haken für alle CSS-Regeln angewendet und Ihr Inhalt (unten).

 Während HTML und CSS sind Sie die Marinade Gewürze und Gewürze, die die JavaScript, die das Fleisch des widgets.

  • An der Spitze, haben wir die wichtigsten Objekte, die oft benutzt werden durch das Skript, einschließlich der Verweise auf das canvas-element und sein 2D-Kontext. 
  • Die init () - Funktion wird aufgerufen, wenn die video-Wiedergabe beginnt, und setzt alle Objekte in dem Skript verwendet. 
  • Die sampleVideo () - Funktion erfasst den aktuellen frame der Wiedergabe von video, während setBlade() lädt eine externe Bild erforderlich, die von der animation. 
  •  Das Tempo und die Inhalte des canvas-animation gesteuert werden, die von der main () - Funktion, die wie das Skript Herzschlag. Führen Sie in regelmäßigen Abständen, einmal das video zu spielen beginnt, sind es Malt jedes Bild der animation, indem Sie zunächst das clearing der Leinwand, dann ruft jeder von dem Skript die fünf Funktionen zum zeichnen:
    • drawBackground() 
    •  drawFilm()
    • drawTitle() 
    • drawDescription() 
    •  drawStats()

 Wie die Namen bereits andeuten, jede Zeichnung Funktion ist verantwortlich für die Zeichnung ein Element in der animation Szene. Die Strukturierung der code auf diese Weise erhöht die Flexibilität und macht zukünftige Wartung zu erleichtern.

 Das volle Skript ist unten gezeigt. Nehmen Sie sich einen moment Zeit, um zu bewerten, und sehen, ob Sie können vor Ort alle änderungen, die Sie machen würde, um ihn zu beschleunigen.


Schritt 3: Code-Optimierung: die Regeln Kennen 

Die erste Regel der code-performance Optimierung ist: nicht. 

Der Sinn dieser Regel ist zu entmutigen Optimierung für die Optimierung Willen, da der Prozess kommt zu einem Preis. 

 Ein optimiertes Skript wird leichter sein, für die browser Parsen und verarbeiten, aber in der Regel mit einer Belastung für die Menschen, die finden es schwieriger zu Folgen und pflegen. Wenn Sie entscheiden, dass einige Optimierung erforderlich ist, setzen einige Ziele, die vorher, so dass Sie nicht auf Abwege geraten durch den Prozess und es übertreiben.

 Das Ziel bei der Optimierung dieses widget wird an die main () - Funktion ausgeführt, die in weniger als 33 Millisekunden, wie es sollte, die passt die frame-rate der Wiedergabe von video-Dateien (sintel.mp4 und sintel.webm). Diese Dateien verschlüsselt wurden, an eine Wiedergabe-Geschwindigkeit von 30 (dreißig Bilder pro Sekunde), was übersetzt etwa 0.33 Sekunden oder 33 Millisekunden pro Bild ( 1 Sekunde ÷ 30 frames ).

 Da JavaScript zeichnet eine neue animation frame auf die Leinwand jedes mal die main () - Funktion aufgerufen, die das Ziel der Optimierung wird der Prozess sein, um diese Funktion nutzen 33 Millisekunden oder weniger jedes mal, wenn es läuft. Diese Funktion wiederholt sich mit einem setTimeout (), Javascript-timer, wie unten gezeigt.

.

 Diese Regel unterstreicht den Punkt, dass die Optimierung sollte immer durchgeführt werden, am Ende des Entwicklungsprozesses, wenn Sie bereits konkretisiert einige komplette, funktionierende code. Die Optimierung der Polizei lassen Sie uns gehen Sie auf dieser ein, da die widget-Skript ist ein perfektes Beispiel für die komplette, Arbeits-Programm, das ist bereit für den Prozess.

Die Dritte Regel: nicht doch, und Profil den ersten. 

Diese Regel ist zu verstehen, Ihr Programm in Bezug auf die Laufzeit-performance. Profiling hilft Ihnen, zu wissen, anstatt zu erraten, welche Funktionen oder Bereiche der Skript nehmen sich die meisten Zeit oder am häufigsten verwendet werden, so dass Sie sich auf diejenigen, die in den Optimierungsprozess.   Es ist wichtig genug, um in führende Browser-Schiff mit eingebauten JavaScript-Profiler, oder haben Erweiterungen, die diese Dienstleistung erbringen.

Ich lief das widget unter dem profiler in Firebug, und unten ist ein screenshot der Ergebnisse. 


Schritt 4: Legen Sie Sich Einige Der Performance-Metriken 

 Als Sie lief das widget, ich bin sicher, Sie finden alle Sintel Sachen in Ordnung, und waren absolut hin und Weg von dem Punkt auf der rechten unteren Ecke der Leinwand, die man mit einer schönen Grafik und glänzend text.

 Es ist nicht nur ein hübsches Gesicht, dass die box liefert auch einige real-time-performance-Statistiken über das laufende Programm. Es ist eigentlich eine einfache, bare-bones-Javascript-profiler.  Das ist richtig! Yo, ich hörte Sie wie profiling, also habe ich ein profiler in Ihren Film, so dass Sie Profil es, während Sie beobachten. 

Die Grafik tracks die Render-Zeit, ermittelt durch die Messung, wie lange jeder ausführen von main() übernimmt in Millisekunden.  Da diese Funktion zeichnet jedes frame der animation, es ist effektiv der animation frame rate. Jede vertikale Blaue Linie im Diagramm zeigt die Zeit, die ein frame.   Die rote horizontale Linie ist die soll-Geschwindigkeit, die wir bei 33ms, passen Sie die video-Datei der frame-raten. Direkt unter der Grafik, die Geschwindigkeit von dem letzten Aufruf von main() ist in Millisekunden angegeben.

 Der profiler ist auch eine praktische browser-rendering-Geschwindigkeit testen. Im moment, die Durchschnittliche render-Zeit in Firefox ist 55 MS, 90 MS, im IE 9, 41ms in Chrom, 148ms in Oper und 63ms in Safari.  Alle Browser wurden unter Windows XP, außer für den IE 9, die profiliert wurde auf Windows Vista.

 Die nächste Metrische unten, die Leinwand FPS (Leinwand Bilder pro Sekunde), die durch das zählen, wie viele Male main() aufgerufen wird pro Sekunde. Der profiler zeigt die neuesten Leinwand-FPS-rate, wenn das video noch abgespielt wird, und wenn es endet, es zeigt die Durchschnittliche Geschwindigkeit aller Aufrufe von main().

 Die Letzte Metrik ist Browser-FPS, die misst, wie viele der browser aktualisiert das aktuelle Fenster in jeder Sekunde. Dieser ist nur verfügbar, wenn Sie das widget in Firefox, da kommt es auf ein feature derzeit nur in diesem browser-Fenster genannt.mozPaintCount., eine JavaScript-Eigenschaft, die Spur hält, wie viele Male das browser-Fenster neu gestrichen wurde, da die Webseite zum ersten mal geladen wird.

Die repaints in der Regel auftreten, wenn ein Ereignis oder eine Aktion, ändert sich das Aussehen einer Seite Auftritt, wie wenn Sie nach unten Blättern oder mit der Maus über einen link. Es ist effektiv die browser-Echtzeit-frame-rate, die bestimmt ist von, wie beschäftigt die aktuelle Webseite ist. 

Um welche Auswirkungen abschätzen die UN-optimierte Canvas-Animation auf MozPaintCount hatte, entfernte ich das Canvas-Tag und alle JavaScript, um die Browser-Frame-Rate zu verfolgen, wenn nur das Video abgespielt. Meine Tests erfolgten in Firebug Konsole, mit der folgenden Funktion:

 Die Ergebnisse: Der browser frame-rate war zwischen 30 und 32 FPS, wenn das video abgespielt wurde, und fiel auf 0-1 FPS, wenn das video beendet. Dies bedeutet, dass Firefox war seine Einstellung Fenster repaint Frequenz, mit der die Wiedergabe von video, codiert mit 30fps.  Wenn der test wurde mit der un-optimiert canvas-animation und video-spielen zusammen, es verlangsamt 16fps, wie der browser wurde jetzt kämpfen, um ausführen alle JavaScript-und immer noch neu streichen der Fenster auf, so dass sowohl die video-Wiedergabe und canvas-Animationen träge.

 Wir werden jetzt beginnen, tweaking, unser Programm, und wie wir das tun, werden wir merken, in die Render-Zeit, Canvas FPS und Browser-FPS zu Messen, die Auswirkungen unserer änderungen.


Schritt 5: Verwenden Sie requestAnimationFrame() 

Die letzten zwei JavaScript-Schnipsel oben verwenden Sie die setTimeout() und setInterval () - timer-Funktionen. Um diese Funktionen zu verwenden, geben Sie einen Zeitintervall in Millisekunden und die callback-Funktion, die Sie wollen ausgeführt, wenn die Zeit verstreicht.   Der Unterschied zwischen den beiden ist, dass setTimeout() ruft die Funktion nur einmal, während setInterval() wird es wiederholt.

 Während diese Funktionen schon immer unverzichtbaren Werkzeugen in der JavaScript animator ' s kit, haben Sie ein paar Fehler:

Erste, der Zeitintervall ist nicht immer zuverlässig. Wenn das Programm immer noch in der Mitte der Ausführung etwas anderes, wenn das Intervall verstreicht, wird die callback-Funktion wird ausgeführt, später als ursprünglich festgelegt, sobald der browser wird nicht mehr beschäftigt.  In der main () - Funktion, setzen wir das Intervall auf 33 Millisekunden, aber als der profiler zeigt, ist die Funktion tatsächlich aufgerufen wird jedes 148 Millisekunden in der Oper. 

Zweitens, es gibt ein Problem mit dem browser aktualisiert. Hätten wir eine callback-Funktion generiert, dass die 20 frames einer animation pro Sekunde, während der browser neu gestrichen-Fenster wird nur 12 mal in der Sekunde, 8-Aufrufe zu dieser Funktion wird verschwendet werden, da der Anwender nie zu sehen bekommt, die Ergebnisse. 

Endlich, der browser hat keine Möglichkeit zu wissen, dass die Funktion aufgerufen wird, wird die Animation der Elemente im Dokument. Dies bedeutet, dass, wenn diese Elemente scrollen aus der Ansicht oder klickt der Benutzer auf einen anderen tab, wird der Rückruf wird immer noch wiederholt ausgeführt, Verschwendung von CPU-Zyklen. 

 Mit requestAnimationFrame() löst die meisten dieser Probleme, und es kann verwendet werden, anstelle der timer-Funktionen im HTML5-Animationen. Statt der Angabe einer Zeitspanne, requestAnimationFrame() synchronisiert die Funktion ruft mit dem browser-Fenster aktualisiert.  Dies führt zu mehr Flüssigkeit, konsistent animation, da keine frames verworfen werden, und die browser können weitere interne Optimierungen zu wissen, eine animation im Gange ist.

Ersetzen Sie setTimeout() mit requestAnimationFrame in unserem widget, die wir zuerst fügen Sie die folgende Zeile an der Spitze unseres Skripts: 

 Als Spezifikation ist noch Recht neu, manche Browser oder browser-Versionen haben Ihre eigenen experimentellen Implementierungen, diese Zeile stellt sicher, dass der name der Funktion Punkte für die richtige Methode, wenn es verfügbar ist, und fällt zurück auf setTimeout (), wenn nicht. Dann in der main () - Funktion, ändern wir diese Zeile: 

...:  

Der erste parameter nimmt die callback-Funktion, die in diesem Fall ist die main () - Funktion. Der zweite parameter ist optional und gibt das DOM-element mit der animation. Es soll verwendet werden, um zu berechnen, weitere Optimierungen. 

Beachten Sie, dass die getStats () - Funktion verwendet auch ein setTimeout(), aber das lassen wir, dass man im Ort auf, da diese spezielle Funktion nichts zu tun hat mit dem animieren der Szene. requestAnimationFrame() wurde speziell für Animationen, so dass, wenn Sie Ihre callback-Funktion, die nicht tun, animation, können Sie setTimeout() oder setInterval(). 


 Schritt 6: Benutzen Sie die Page-Visibility-API

Im letzten Schritt haben wir gemacht requestAnimationFrame macht den canvas animation, und jetzt haben wir ein neues problem. Wenn wir beginnen, von dem widget, dann minimieren Sie das browser-Fenster oder wechseln zu einem neuen tab, wird das widget-Fenster repaint-rate drosselt runter um Strom zu sparen.  Dadurch verlangsamt sich auch die canvas-animation da ist es jetzt synchronisiert mit dem repaint-rate - das wäre perfekt, wenn das video nicht spielen, auf der Ende. 

Wir brauchen eine Möglichkeit, zu erkennen, wenn die Seite nicht angezeigt wird, so dass wir anhalten der Wiedergabe von Videos; das ist, wo die Page-Visibility-API kommt zur Rettung. 

Die API enthält eine Reihe von Eigenschaften, Funktionen und Ereignisse, die wir verwenden können, um zu erkennen, ob eine Webseite in der Ansicht oder ausgeblendet werden.   Wir können dann code hinzufügen, passt sich unser Verhalten entsprechend. Wir verwenden diese API, um zu pausieren das widget die Wiedergabe von video, wenn die Seite inaktiv ist.

Wir beginnen, indem Sie eine neue Ereignis-listener, um unser Skript: 

Als Nächstes kommt die event-handler-Funktion: 


Schritt 7: Für Kundenspezifische Formen, Ziehen den Ganzen Weg Auf Einmal 

 Pfade werden verwendet, um zu erstellen, und zeichnen Sie eigene Formen und Umrisse auf dem - element, das zu allen Zeiten haben einen aktiven Pfad.

Ein Pfad enthält eine Liste von Nebenpfade und jedes Sub-Pfad setzt sich aus Leinwand koordinieren Punkte durch eine Linie oder einen Bogen miteinander verbunden. Der Weg machen und Zeichenfunktionen sind Eigenschaften von der Leinwand Kontextobjekt und können in zwei Gruppen eingeteilt werden. 

Es gibt die Unterpfad-making-Funktionen, verwendet um zu definieren, einen Unterpfad und gehören lineTo(), quadraticCurveTo(), bezierCurveTo () und arc().   Dann haben wir die stroke() und fill () der Pfad/Unterpfad Zeichnung Funktionen. Mit stroke() wird ein Umriss, während die fill () - erzeugt eine Form gefüllt, indem Sie entweder eine Farbe, Farbverlauf oder Muster. 

Beim zeichnen von Formen und umrissen auf die Leinwand, es ist effizienter erstellen Sie den gesamten Pfad zuerst, dann nur stroke() oder fill() ist es einmal, eher als die Definition und Zeichnung der einzelnen supbath zu einer Zeit. Unter der profiler-Graphen beschrieben, der in Schritt 4 als ein Beispiel, jede einzelne vertikale Blaue Linie ist ein Unterpfad, während Sie alle zusammen machen bis der ganze Strom Weg.   

Der stroke () - Methode wird derzeit aufgerufen, innerhalb einer Schleife, die definiert jeder Unterpfad:  

 Dieser graph gezeichnet werden können, wesentlich effizienter zu gestalten, definieren Sie zunächst alle Unterpfade, dann ist nur die Erstellung der gesamten aktuellen Pfad auf einmal, wie unten gezeigt.


Schritt 8: Verwenden Sie eine Off-Screen-Leinwand Zum Erstellen der Szene 

 Diese Optimierung der Technik ist in Bezug auf die in der vorherigen Schritt, dass Sie beide basieren auf dem gleichen Prinzip der Minimierung der Webseite aktualisiert.

 Wann immer etwas passiert, dass änderungen eines Dokuments suchen oder Inhalte, die der browser hat, um einen Zeitplan repaint Betrieb bald nach, dass ein update der Benutzeroberfläche. Neu kann eine teure operation sein in Bezug auf die CPU-Zyklen und Kraft, vor allem für den dichten Seiten mit einer Menge von Elementen und animation geht.  Wenn Sie den Aufbau einer komplexen animation, Szene, indem viele Elemente ein zu einer Zeit, die , jede neue Ergänzung darf nur der Auslöser einer ganzen repaint.

 Es ist besser und viel schneller zu bauen die Szene auf einem Bildschirm angezeigt (in der Erinnerung) , und sobald Sie dies getan haben, malen Sie die ganze Szene nur einmal auf dem Bildschirm sichtbar .

 Einfach unten den code, erhält Referenz auf das widget - und seinem Kontext, wir werden das hinzufügen von fünf neuen Linien, erstellen Sie eine off-screen-Leinwand-DOM-Objekt und entsprechen seine Abmessungen mit dem original, sichtbar .

 Wir werden dann tun, wie suchen und ersetzen in allen Zeichenfunktionen für alle Verweise auf "mainCanvas" und ändern Sie Sie auf "osCanvas".  Verweise auf "mainContext" wird ersetzt mit "osContext". Alles wird nun erstellt, um die neue off-screen-Leinwand, anstelle von den original - .

 Schließlich, fügen wir eine weitere Zeile in main (), die Malt, was derzeit auf den off-screen - - in unserem original .


Schritt 9: Cache-Pfade, Die Als Bitmap-Bilder, Wenn Möglich 

 Für viele Arten von Grafiken, die Verwendung der Methode drawImage() wird viel schneller als konstruieren Sie das gleiche Bild auf Leinwand mithilfe von Pfaden. Wenn Sie feststellen, dass eine große potion von deinem script ausgegeben wird, zeichnen der wiederholt die gleichen Formen und Konturen immer und immer wieder, Sie können speichern die browser einige arbeiten durch die Zwischenspeicherung der resultierenden Grafik als bitmap-Bild, dann malen Sie nur einmal auf die Leinwand, wenn erforderlich, mit der Methode drawImage().

Es gibt zwei Möglichkeiten, dies zu tun. 

 Die erste ist durch die Schaffung einer externen Bild-Datei als JPG -, GIF-oder PNG-Bild, dann laden Sie es dynamisch mit JavaScript und kopieren es auf Ihre Leinwand. Der einzige Nachteil dieser Methode ist die zusätzliche Dateien, wird Ihr Programm zum herunterladen aus dem Netz, aber je nach Art der Grafik oder was Ihre Anwendung tut, könnte dies tatsächlich eine gute Lösung.  Die animation widget verwendet diese Methode zum laden der spinning blade Grafik -, was unmöglich gewesen wäre, neu zu erstellen mit nur den canvas-Pfad zeichnen-Funktionen.

 Die zweite Methode beinhaltet die Zeichnung nur die Grafik einmal, um eine off-screen-Leinwand, anstatt das laden eines externen Bilds. Wir verwenden diese Methode, um cache-der Titel der animation widget.  Zuerst erstellen wir eine variable als Verweis auf die neue off-screen-canvas-element erstellt werden. Der Standardwert ist false, so dass wir sagen können, ob oder nicht eine Bild-cache wurde erstellt und gespeichert, sobald das script gestartet wird:

 Wir Bearbeiten Sie dann die drawTitle () - Funktion zuerst überprüfen, ob das titleCache Leinwand Bild erstellt wurde. Wenn nicht, erstellt es ein Offscreen-image und speichert einen Verweis darauf in titleCache:


Schritt 10: Löschen Sie die Leinwand Mit clearRect() 

 Der erste Schritt in der Zeichnung eine neue animation frame ist, deaktivieren Sie die Leinwand von der aktuellen. Dies kann entweder geschehen, indem das zurücksetzen der Breite des canvas-element, oder verwenden Sie die clearRect () - Funktion.

 Zurücksetzen der Breite hat auch einen Nebeneffekt löschen des aktuellen canvas-Kontext zurück zu seinem default-Zustand ist, die Dinge verlangsamen. Mit clearRect() ist immer der schnellere und bessere Weg zum löschen der Leinwand.

 In der main () - Funktion, wir werden das ändern:

 ...:


Schritt 11: Umsetzen Schichten 

 Wenn Sie gearbeitet haben, mit Bild oder video-editing-software wie Gimp oder Photoshop vor, dann sind Sie bereits vertraut mit dem Konzept von Schichten, auf denen ein Bild zusammengesetzt ist, die durch stapeln viele Bilder übereinander, und jeder kann gewählt werden und separat bearbeitet.

 Angewendet auf eine Leinwand, animation Szene, jede Ebene eine separate canvas-element, platziert auf der Oberseite jeder anderen Verwendung von CSS, um die illusion von einem einzigen element. Als eine Optimierung der Technik, es funktioniert am besten, wenn es eine klare Unterscheidung zwischen Vordergrund-und hintergrund-Elemente einer Szene, mit der die meisten der Aktion stattfindet, in den Vordergrund. Der hintergrund kann dann gezeichnet werden auf einem canvas-element, ändert sich nicht viel zwischen den frames einer animation, und die Vordergrundfarbe auf eine weitere dynamische canvas-element oben. Auf diese Weise wird die gesamte Szene muss nicht neu gezeichnet werden wieder für jedes Animations-frame. 

 Leider ist die animation widget ist ein gutes Beispiel für eine Szene, wo können wir sinnvoll die Anwendung dieser Technik, da sowohl die Vordergrund-und hintergrund-Elemente sind sehr animiert.


Schritt 12: Aktualisierung Nur Die sich Ändernden Bereiche einer Animation Szene 

Dies ist eine weitere Optimierung der Technik, hängt stark von der animation Szene Komposition.  Es kann verwendet werden, wenn der Szene-animation ist konzentriert um einen bestimmten rechteckigen Bereich auf der Leinwand. Wir könnten dann löschen und neu zeichnen, nur neu gezeichnet, die region.  

Zum Beispiel, die Sintel-Titel bleibt unverändert, während die meisten der animation, so dass wir verlassen konnte, dass dieser Bereich intakt, wenn das clearing der Leinwand für den nächsten Animations-frame. 

Diese Technik implementieren, ersetzen wir die Zeile, fordert die Titel-Zeichnung Funktion in main() mit den folgenden block: 


 Schritt 13: Setzen Sie Das Sub-Pixel-Rendering

 Sub-pixel-rendering oder anti-aliasing erfolgt, wenn der browser automatisch für die Grafik-Effekte zum entfernen von gezackten Kanten. Es führt zu einer glatteren Suche Bilder und Animationen, und wird automatisch aktiviert, wenn Sie angeben, Bruch-Koordinaten, sondern als ganze Zahl, wenn die Zeichnung auf die Leinwand.

 Jetzt gibt es keinen standard, genau wie es getan werden sollte, so subpixel-rendering ist ein wenig inkonsistent zu allen Browsern in Bezug auf die gerenderte Ausgabe.  Es verlangsamt die rendering-Geschwindigkeit im browser zu tun einige Berechnungen zu generieren, die Wirkung. Als Leinwand anti-aliasing werden nicht direkt abgeschaltet, der einzige Weg, um zu bekommen es ist immer mit ganzen zahlen in der Zeichnung, koordiniert.

 Wir verwenden Math.floor (), um sicherzustellen, ganzen zahlen in unserem Skript immer anwendbar. Beispielsweise die folgende Zeile in drawFilm():

...ist auch so geschrieben: 


 Schritt 14: die Ergebnisse Messen

Wir habe schon ein paar canvas-animation-Optimierung Techniken, und es jetzt Zeit, um das Ergebnis zu überprüfen. 

Diese Tabelle zeigt die vor und nach der durchschnittlichen Render-Zeiten und Leinwand FPS.   Wir sehen einige signifikante Verbesserungen auf allen Browsern, obwohl es nur Chrome, die wirklich nahe kommt, um unsere ursprüngliche Ziel, eine maximale 33ms Renderzeit. Dies bedeutet, es ist noch viel Arbeit getan werden, um das gewählte Ziel.

Wir weiterfahren konnten durch die Anwendung allgemeiner JavaScript-Optimierung Techniken, und wenn das immer noch fehlschlägt, vielleicht betrachten toning down die animation, indem einige Glocken und Pfeifen. Aber wir werden nicht auf der Suche auf alle diese Techniken heute, da der Fokus lag hier auf Optimierungen für das  - animation.

Die Canvas-API ist noch sehr neu und wächst jeden Tag, so halten Sie Experimentieren, testen, erforschen und weitergeben. Vielen Dank für das Lesen der Anleitung. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.