In diesem Artikel wird hauptsächlich das Tutorial über die Verwendung von Leinwand zur Optimierung von HTML5 -Rendering vorgestellt. Es stammt aus den technischen Dokumenten des offiziellen IBM -Website -Entwicklers. Freunde, die es brauchen, können sich auf die folgende Einführung beziehen
Wenn Sie 2D -Spiele spielen oder HTML5 -Leinwand rendern, müssen Optimierungen in der Regel durchgeführt werden, um mehrere Ebenen zu verwenden, um eine synthetische Szene zu erstellen. In niedrigen Renderings wie OpenGL oder WebGL wird das Rendering durch Reinigen und Zeichnen des Szenenrahmens mit dem Rahmen durchgeführt. Nach der Implementierung des Renderns muss das Spiel optimiert werden, um die Darstellung des Renders zu verringern, und die erforderlichen Kosten variieren von Situation zu Situation. Da die Leinwand ein DOM -Element ist, können Sie mehrere Leinwände als Optimierungsmethode leiten.
Gemeinsame Abkürzungen
DOM: Dokumentobjektmodell
HTML: Hypertext Markup -Sprache (Hypertext Markup Language)
In diesem Artikel wird die Rationalität der Schicht von Leinwänden untersucht. Verstehen Sie die DOM -Einstellungen, um eine geschichtete Leinwand zu ermöglichen. Die Verwendung hierarchischer Optimierung erfordert verschiedene Praktiken. In diesem Artikel werden auch einige Konzepte und Techniken für Optimierungsstrategien untersucht, die den hierarchischen Ansatz erweitern.
Sie können den Quellcode für die in diesem Artikel verwendeten Beispiele herunterladen.
Wählen Sie eine Optimierungsstrategie aus
Die Auswahl der besten Optimierungsstrategie kann schwierig sein. Bei der Auswahl eines hierarchischen Szenarios müssen Sie überlegen, wie das Szenario komponiert wird. Das Rendern fester Objekte auf großen Bildschirmen erfordert häufig die Wiederverwendung mehrerer Komponenten, die ausgezeichnete Kandidaten für die Forschung sind. Effekte wie Parallaxe oder Animationseinheiten erfordern häufig viel unterschiedlichen Bildschirmraums. Es ist am besten, diese Situationen zu beachten, wenn Sie Ihre besten Optimierungsstrategien untersuchen. Obwohl die hierarchische Optimierung von Leinwand verschiedene Techniken erfordert, wird die Leistung nach korrekter Anwendung dieser Techniken häufig erheblich verbessert.
Einstellungsschicht
Bei Verwendung der hierarchischen Methode besteht der erste Schritt darin, die Leinwand auf der DOM zu setzen. Normalerweise ist dies einfach. Definieren Sie einfach das Canvas -Element und legen Sie es in das DOM, aber die Leinwandschicht erfordert möglicherweise einen zusätzlichen Stil. Bei der Verwendung von CSS gibt es zwei Anforderungen an die erfolgreiche Implementierung der Leinwandhierarchie:
Jedes Canvas -Element muss in derselben Position im Ansichtsfenster koexistieren.
Jede Leinwand muss unter einer anderen Leinwand sichtbar sein.
Abbildung 1 zeigt das allgemeine Überlappungskonzept hinter den Ebeneneinstellungen.
Abbildung 1. Schichtbeispiel
Die Schritte zum Einrichten der Ebene sind wie folgt:
Fügen Sie Canvas -Element -Positionierungsstile hinzu, um die Hierarchie zu unterstützen.
Stylen Sie die Leinwandelemente, um einen transparenten Hintergrund zu erzeugen.
Stellen Sie den Leinwand -Überlappungsstapel ein
Das Erstellen eines Overlay -Stacks in CSS erfordert möglicherweise eine kleine Menge an Stilen. Es gibt viele Möglichkeiten, mit HTML und CSS zu überlappen. Die Beispiele in diesem Artikel verwenden ein <div> -Tag, um die Leinwand zu enthalten. Das <Div> -Tag gibt eine eindeutige ID an, die den Stil auf seine Kinder -HTML5 -Leinwandelemente anwendet, wie in Listing 1 gezeigt.
Auflistung 1. Leinwand -Positionierungsstile
CSS -Code -Inhalt in Zwischenablage kopieren