Estoy implementando un juego HTML5 utilizando lienzo. Ahora estoy pensando en hacer todas las superposiciones de texto como tooltips, speechbubbles, infowindows, etc. usando elementos HTML con posición absoluta sobre el lienzo. Entonces puedo usar muchos efectos y transiciones en las ofertas de CSS3.Mezcla de lienzo y elementos CSS3
Pero no estoy seguro del rendimiento. Estas superposiciones tienen que agregarse y eliminarse frecuentemente (es algo parecido a MMORPG, por lo que habrá muchas burbujas de discursos, etc.).
Probablemente hay 2 preguntas con respecto al rendimiento:
DOM recorrido para añadir/quitar. Tal vez un caché puede ayudar?
HTML y CSS3 en sí.
La otra opción es administrar estos elementos en el lienzo, dibujándolos en cada cuadro. Pero tal vez tenga otra vez una penalización de rendimiento, debido al código adicional, tiempos de espera y cosas que tendría que agregar, para lograr efectos similares, como en CSS3. Y, de todos modos, se necesitaría atravesar alguna estructura de datos.
¿Algún consejo, opinión, experiencia?
Gracias de antemano.
Los tiempos de cruce DOM se pueden reducir almacenando en el caché los elementos "importantes"; A menudo guardo un hash de someUniqueId => DOMElement para este propósito. La identificación se puede almacenar como un atributo data- * en sus elementos para ayudar con este esquema. En cuanto a mezclar CSS3 con Canvas, me he preguntado sobre esta estrategia yo mismo (+1).La transformación (coordenadas del lienzo -> coordenadas de la pantalla) tendrá que abstraerse bien o terminarás con un lío tratando de descubrir dónde colocar tus elementos regulares en la parte superior del lienzo. –