Este artículo presenta principalmente el tutorial sobre el uso de lienzos en capas para optimizar la representación HTML5. Proviene de los documentos técnicos del desarrollador oficial del sitio web de IBM. Amigos que lo necesitan pueden referirse a la siguiente introducción
Por lo general, cuando se juega juegos 2D o renderiza el lienzo HTML5, se requiere que se realicen optimizaciones para usar múltiples capas para construir una escena sintética. En representaciones de bajo nivel como OpenGL o WebGL, la renderización se realiza limpiando y dibujando el marco de la escena por cuadro. Después de implementar la renderización, el juego debe optimizarse para reducir la cantidad de representación, y el costo requerido varía de una situación a otra. Debido a que el lienzo es un elemento DOM, le permite colocar múltiples lienzos como método de optimización.
Abreviaturas comunes
DOM: Modelo de objetos de documento
HTML: lenguaje de marcado de hipertexto (lenguaje de marcado de hipertexto)
Este artículo explorará la racionalidad de los lienzos de capas. Comprenda la configuración DOM para habilitar un lienzo en capas. El uso de la optimización jerárquica requiere varias prácticas. Este artículo también explorará algunos conceptos y técnicas para estrategias de optimización que extienden el enfoque jerárquico.
Puede descargar el código fuente para los ejemplos utilizados en este artículo.
Seleccione una estrategia de optimización
Elegir la mejor estrategia de optimización puede ser difícil. Al elegir un escenario jerárquico, debe considerar cómo se compone el escenario. La representación de objetos fijos en pantallas grandes a menudo requiere la reutilización de varios componentes, que son excelentes candidatos para la investigación. Los efectos como el paralaje o las entidades de animación a menudo requieren mucho espacio de pantalla variable. Es mejor prestar atención a estas situaciones al explorar sus mejores estrategias de optimización. Aunque la optimización jerárquica del lienzo requiere varias técnicas diferentes, el rendimiento a menudo mejorará en gran medida después de la aplicación correcta de estas técnicas.
Capa de configuración
Al usar el método jerárquico, el primer paso es establecer el lienzo en el DOM. Normalmente, esto es simple, solo defina el elemento de lienzo y colóquelo en el DOM, pero la capa de lienzo puede requerir un estilo adicional. Al usar CSS, hay dos requisitos para implementar con éxito la jerarquía de lona:
Cada elemento de lienzo debe coexistir en la misma posición en la ventana gráfica.
Cada lienzo debe ser visible bajo otro lienzo.
La Figura 1 muestra el concepto de superposición general detrás de la configuración de la capa.
Figura 1. Ejemplo de capa
Los pasos para configurar la capa son los siguientes:
Agregue estilos de posicionamiento de elementos de lona para admitir la jerarquía.
Estilizar los elementos de lona para generar un fondo transparente.
Establezca la pila de superposición de lienzo
Crear una pila de superposición en CSS puede requerir una pequeña cantidad de estilos. Hay muchas formas de superponerse usando HTML y CSS. Los ejemplos en este artículo usan una etiqueta <div> para contener el lienzo. La etiqueta <div> especifica una ID única que aplica el estilo a sus elementos de lona HTML5 infantil, como se muestra en el Listado 1.
Listado 1. Estilos de posicionamiento de lienzo
CODE CODE CSS Copiar contenido al portapapeles