Líneas no deseadas que aparecen en el lienzo html5 con mosaicos

Question

Estoy dibujando un mapa en un lienzo con cuadrados de 40px * 40px. Todo está bien hasta que, al desplazar el lienzo (usando la transformación), desplazar el mapa. Entonces, de la nada, las líneas aparecen entre las baldosas. Ver imágenes a continuación.

¿Por qué?

Answer 1

Esto se ve como de punto flotante de posicionamiento (por ejemplo, usted ha desplazado hasta 100.5, 100.5) se combina con el filtrado bilineal mayoría de los navegadores utilizan para mostrar las imágenes en el lienzo 2D.

Básicamente, si dibujaImage() una imagen entre píxeles, cada píxel se suaviza en dos píxeles, lo que significa que los bordes dibujan un 50% de alfa sobre el fondo. Esto rompe el mosaico, porque el borde del siguiente mosaico es el mismo, y dibuja un 50% de alfa sobre el 50% de alfa del otro mosaico, lo que agrega hasta un 75% de alfa. Esto aparecerá más claro o más oscuro (dependiendo del color de fondo) que el resto del mosaico. Así que obtienes "costuras" a lo largo de los bordes de las baldosas.

Para corregir: Math.round() las coordenadas de tu imagen, así como cualquier llamada a translate() (ya que traducir por medio píxel tiene el mismo efecto). Esto garantiza que todo se dibuja en una cuadrícula alineada con píxeles y nunca se arruga.