Mida el cuadro CSS antes de configurar los píxeles
Lea las dimensiones del lienzo mostrado, multiplíquelas por la escala del dispositivo elegido, establezca el ancho y alto del respaldo y transforme las coordenadas del dibujo para que la lógica del juego pueda continuar usando unidades de espacio CSS. Vuelva a aplicar la transformación después de cambiar el ancho o el alto, ya que al asignar esos atributos del lienzo se restablece su estado de dibujo.
Compare una cuadrícula de un píxel, bordes diagonales y texto pequeño de la interfaz de usuario en factores de escala como 1, 1,5 y 2. Compruebe tanto la nitidez como la capacidad de respuesta. Un multiplicador completo de devicePixelRatio es un punto de partida, no una regla que todo juego deba seguir; Reducir la escala de renderizado puede reducir el costo en pantallas densas y dejar el diseño CSS sin cambios.
Trate el cambio de tamaño y la memoria como parte de la elección.
El número de píxeles de la tienda de respaldo crece con ambas dimensiones, por lo que duplicar la escala en cada dirección crea cuatro veces más píxeles. Pruebe una escena ocupada en el tamaño de pantalla más grande admitido y busque presión de memoria o redibujados más lentos antes de enviar una configuración de alta densidad.
La guía del lienzo de MDN muestra una configuración basada en devicePixelRatio. La página de mejores prácticas de WebGL destaca sutilezas con proporciones y zoom no enteros. Vuelva a verificar después de hacer zoom en el navegador o mover una ventana entre pantallas y evite restablecer repetidamente el almacén de respaldo si sus dimensiones efectivas no han cambiado.
Preguntas sobre relación entre canvas y devicePixelRatio
¿El ancho del lienzo siempre debe ser igual al ancho de CSS multiplicado por devicePixelRatio?
No. Eso puede afinar el contenido pero multiplica el trabajo y la memoria. Compare una versión de resolución completa con una escala limitada utilizando la misma escena y controles visuales.
¿Por qué el dibujo se vuelve borroso después de cambiar el tamaño?
Cambiar el ancho o alto del lienzo borra su mapa de bits y restablece el estado del contexto. Vuelva a calcular sus dimensiones de respaldo, vuelva a escalar el contexto y vuelva a dibujar la escena.
Más información
¿Has visto algo desactualizado? Notificar una corrección