¿Cuál esimagen Lona Suavizar
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.
AFAIK de ninguna manera. 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).
Hay un (casi un año) bug report in webkit 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.
Una mirada rápida en el enlace reportado por Stephan siguiente muestra la siguiente actualización para este problema en el seguimiento de errores:
El valor propuesto para de CSS3 imagen-renderizado 'optimizar el contraste' se ha implementado como ' -webkit-optimize-contrast 'en la falla 56627. Ahora mismo en WebKit, al usar esto obtendrá la interpolación del vecino más cercano.
manera que el ajuste -webkit-optimize-contrast CSS parece ser la respuesta.
Esto ahora es ignorado por Chrome:/(Supongo que todo webkit) – UpTheCreek
Redondee su X e Y antes de mostrar sus imágenes en la pantalla.
Si dibuja imágenes en sub-píxeles, algunos navegadores tratarán de alisarlo 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, tome una lectura en este artículo:
http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/
Y aquí es una prueba jsperf en los métodos de redondeo:
Parece' myObject.X = myObject.X >> 0' Es un poco más rápido. Tenga en cuenta que ambos actuarán como 'Math.floor', no' Math.round' – UpTheCreek
@UpTheCreek El más rápido absoluto: 'myObject.X = ~~ myObject.X'. [Ver el jsperf] (http://jsperf.com/math-floor-vs-math-round-vs-parseint/110). – rvighne
@rvighne: no en mi máquina con win7 cromo v32 aparentemente: * ± 0.23% 0.27% más lento * – UpTheCreek
Para el <canvas> etiqueta, WebKit nightlies después de r117635 y Chrome Canary 21.0.1154.0 ahora tienen un webkitImageSmoo atributo thingEnabled. (Tenga en cuenta que esto se aplica solo al <canvas>, no a los elementos HTML más en general.)
En realidad, quieres aplicar esto al contexto 2D del lienzo, no al elemento lienzo en sí. 'var ctx = canvas.getContext ('2d'); ctx.webkitImageSmoothingEnabled = false; 'o' ctx.mozImageSmoothingEnabled = false; ' – Fritzy
@Fritzy: esto no hace nada en Chrome 21 – UpTheCreek
¡Funciona ahora en Chrome 22! – forresto
Si desea dibujar formas 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 de una unidad entre las coordenadas de números enteros, se superpondrá con 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 se intenta trazar una línea a partir de (1, 0) a (1, 3), el navegador dibujará una línea que cubre 0,5 píxeles de la pantalla a cada lado de x = 1. La pantalla no puede mostrar la mitad de un píxel, por lo que se expande la línea de abarcan un total de dos píxeles:
Pero, si se intenta trazar una línea desde (1,5, 0) a (1,5, 3), el navegador se dibuje una línea que cubre 0,5 píxeles de la pantalla a cada lado de x = 1,5, que resulta en una verdadera línea 1 píxeles de ancho:
Ya sabes, con pixel-art dentada es bueno, y suave es malo. Estoy buscando el mismo problema y no he encontrado los equivalentes de webkit. – Omiod
'' 'ctx.webkitImageSmoothingEnabled = false''' funciona ahora en Chrome 22 – forresto