Cet article présente principalement le tutoriel sur l'utilisation de la toile en couches pour optimiser le rendu HTML5. Il provient des documents techniques du développeur officiel du site Web IBM. Les amis qui en ont besoin peuvent se référer à l' introduction suivante
En règle générale, lors de la lecture de jeux 2D ou de la création de toile HTML5, des optimisations doivent être effectuées pour utiliser plusieurs couches pour construire une scène synthétique. Dans les rendus de bas niveau tels que OpenGL ou WebGL, le rendu est effectué en nettoyant et en dessinant la scène Cadre par cadre. Une fois le rendu mis en œuvre, le jeu doit être optimisé pour réduire le montant du rendu, et le coût requis varie d'une situation à l'autre. Parce que la toile est un élément DOM, il vous permet de superposer plusieurs toiles comme méthode d'optimisation.
Abréviations communes
DOM: modèle d'objet de document
HTML: Langue de balisage hypertexte (langage de balisage hypertexte)
Cet article explorera la rationalité des toiles de superposition. Comprenez les paramètres DOM pour activer une toile en couches. L'utilisation d'optimisation hiérarchique nécessite diverses pratiques. Cet article explorera également certains concepts et techniques de stratégies d'optimisation qui étendent l'approche hiérarchique.
Vous pouvez télécharger le code source pour les exemples utilisés dans cet article.
Sélectionnez une stratégie d'optimisation
Choisir la meilleure stratégie d'optimisation peut être difficile. Lorsque vous choisissez un scénario hiérarchique, vous devez considérer comment le scénario est composé. Le rendu des objets fixes sur de grands écrans nécessite souvent la réutilisation de plusieurs composants, qui sont d'excellents candidats à la recherche. Des effets tels que des entités de parallaxe ou d'animation nécessitent souvent beaucoup d'espace d'écran variable. Il est préférable de prêter attention à ces situations lors de l'exploration de vos meilleures stratégies d'optimisation. Bien que l'optimisation hiérarchique de la toile nécessite plusieurs techniques différentes, les performances seront souvent considérablement améliorées après une application correcte de ces techniques.
Couche des paramètres
Lorsque vous utilisez la méthode hiérarchique, la première étape consiste à définir la toile sur le DOM. Normalement, c'est simple, définissez simplement l'élément de toile et le placez dans le DOM, mais la couche de toile peut nécessiter un style supplémentaire. Lorsque vous utilisez CSS, il existe deux exigences pour mettre en œuvre avec succès la hiérarchie du canevas:
Chaque élément de canevas doit coexister dans la même position dans la fenêtre.
Chaque toile doit être visible sous une autre toile.
La figure 1 montre le concept de chevauchement général derrière les paramètres de la couche.
Figure 1. Exemple de calque
Les étapes pour configurer le calque sont les suivantes:
Ajoutez des styles de positionnement des éléments Canvas pour soutenir la hiérarchie.
Style les éléments de la toile pour générer un fond transparent.
Définir la pile de chevauchement Canvas
La création d'une pile de superposition dans CSS peut nécessiter une petite quantité de styles. Il existe de nombreuses façons de se chevaucher en utilisant HTML et CSS. Les exemples de cet article utilisent une balise <div> pour contenir le canevas. La balise <div> spécifie un ID unique qui applique le style à ses éléments de canevas Child HTML5, comme indiqué dans la liste 1.
Listing 1. Styles de positionnement sur toile
CODE CSS Copier le contenu dans le presse-papiers