2011-08-11 11 views
12

Como he visto here. He estado teniendo algunos problemas con la precisión de sub píxeles en el lienzo. Ahora estoy teniendo aún más. Estoy tratando de renderizar cuadrados isométricos de bordes duros como se muestra en la imagen en el enlace que proporcioné. En un intento de trabajar más tarde a través de los datos de píxeles en la imagen procesada y extraer los colores actuales.HTML5 Canvas evita cualquier representación de subpíxeles

Sub Pixel

Pero debido a la im cuestión sub píxel que tiene que estoy recibiendo colores que no están realmente presentes en la imagen original! Y no importa dónde parezca que empiezo a dibujar la línea que ve en la imagen (ya sea desde [1,1] a [10,10] o [1,5, 1,5] a [10,5, 10,5], esto es solo una ejemplo) ¡Siempre obtengo estos colores subpíxel que arruinan mis resultados!

¿Alguien sabe cómo puedo evitar esto o sugerir la forma correcta de dibujar una línea pseudoisométrica? (Pseudo como en ángulos isométricos de pixel art) Así que tengo buenos bordes duros en mis formas y no estoy arruinando el imagen renderizada con cualquier tipo de basura subpíxel.

+0

considerar la adición de una etiqueta de "anti-aliasing"? – maerics

+3

Ver: http://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html- canvas-element – mwolfetech

Respuesta

10

Bueno, después de algunas investigaciones exhaustivas parece que no hay una forma estandarizada para detener lo que estoy experimentando.

Cuál es anti-aliasing que dependiendo del navegador se puede habilitar o inhabilitar solamente para ciertas operaciones de dibujo.

Hay algunos trucos sobre cómo evitar el suavizado en algunas situaciones en esta pregunta desbordamiento de pila: Can I turn off antialiasing on an HTML <canvas> element?

Pero el único que va a trabajar para mí es implementar manualmente mis propias funciones de dibujo para producir la formas que quiero sin ningún anti-aliasing. Esto se hará con el lienzo función putImageData y hay un buen tutorial right here sobre cómo usarlo.

Por el momento no hay ninguna solución compatible API para el problema

+2

Este fue el caso en 2011, ¿sigue siendo así en 2017? – dom96