Suavizado de imagen de lienzo
webkit canvas (6)
Hay un informe de fallas (casi de un año) en el sitio web sobre esto. Otra posibilidad sería crear su arte de píxeles en resoluciones más altas y escalarlas. Esto probablemente arroje mejores resultados que la creación de una escala, pero se combinaría con mayores demandas de tráfico.
Que es
ctx.mozImageSmoothingEnabled = false;
para webkit (u otros navegadores)? Lo necesito para eliminar el anti-aliasing porque estoy tratando de obtener un efecto pixelado a una imagen. Con anti-aliasing, parece de mala calidad pero sin bordes afilados.
Para la etiqueta <canvas> , WebKit nightlies después de r117635 y Chrome Canary 21.0.1154.0 ahora tienen un atributo webkitImageSmoothingEnabled. (Tenga en cuenta que esto se aplica solo a <canvas> , no a elementos HTML de manera más general).
Redondea tu X e Y antes de mostrar tus imágenes en la pantalla.
Si dibuja imágenes en subpíxeles, algunos navegadores intentarán antialias antes de mostrar la imagen.
La forma más rápida de hacerlo es un OR binario con cero.
myObject.X = myObject.X | 0;
Para una explicación más profunda, lea este artículo:
http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/
Y aquí hay una prueba jsperf sobre métodos de redondeo:
Si desea dibujar la forma sin bordes suaves intente utilizar medios píxeles en las coordenadas.
Imagine cada píxel como un cuadrado grande. Las coordenadas de números enteros (0, 1, 2 ...) son los bordes de los cuadrados. Si dibuja una línea de una unidad de ancho entre las coordenadas de números enteros, se superpondrá a los lados opuestos del cuadrado de píxeles, y la línea resultante se dibujará con dos píxeles de ancho. Para dibujar una línea de solo un píxel de ancho, debe desplazar las coordenadas en 0,5 perpendiculares a la dirección de la línea.
Por ejemplo, si intenta dibujar una línea de (1, 0) a (1, 3), el navegador dibujará una línea que cubrirá 0,5 píxeles de pantalla a cada lado de x = 1. La pantalla no puede mostrar medio píxel, por lo que expande la línea para cubrir un total de dos píxeles:
Pero, si tratas de trazar una línea de (1.5, 0) a (1.5, 3), el navegador dibujará una línea que cubrirá 0.5 píxeles de pantalla a cada lado de x = 1.5, lo que da como resultado un verdadero ancho de 1 píxel línea:
Una mirada rápida al enlace informado por Stephan a continuación muestra la siguiente actualización de este problema en el rastreador de errores:
El valor propuesto para el renderizado de imágenes de CSS3 ''optimize-contrast'' se ha implementado como ''-webkit-optimize-contrast'' en el error 56627. Ahora mismo en WebKit, al usar esto obtendrá la interpolación del vecino más cercano.
Entonces la configuración CSS -webkit-optimize-contrast parece ser la respuesta.
AFAIK ninguna manera todavía. Puede obtener el mismo efecto dibujando lo que quiere pixel por pixel, pero con más trabajo (hey, no tanto si es algo así como líneas).