javascript - whether - properties canvas html5

¿Puedo desactivar el antialiasing en un elemento HTML<canvas>?

Question

Estoy jugando con el elemento <canvas> , líneas de dibujo y tal.

Me di cuenta de que mis líneas diagonales tienen antialias. Prefiero el aspecto irregular de lo que estoy haciendo, ¿hay alguna forma de desactivar esta característica?

Answer 1

Debe antialias gráficos vectoriales

Se requiere un antialiasing para el trazado correcto de los gráficos vectoriales que implica coordenadas no enteras (0,4, 0,4), lo que harán todos menos unos pocos clientes.

Cuando se le dan coordenadas no enteras, el lienzo tiene dos opciones:

• Antialias : pinta los píxeles alrededor de la coordenada con respecto a qué tan lejos está la coordenada entera de la que no es entera (el error de redondeo).
• Redondeo : aplique alguna función de redondeo a la coordenada no entera (por lo que 1.4 se convertirá en 1, por ejemplo).

La estrategia posterior funcionará para gráficos estáticos, aunque para gráficos pequeños (un círculo con radio de 2) las curvas mostrarán pasos claros en lugar de curvas suaves.

El verdadero problema es cuando los gráficos se traducen (movidos): los saltos entre un píxel y otro (1.6 => 2, 1.4 => 1) significan que el origen de la forma puede saltar con relación al contenedor principal (cambios constantes) 1 píxel arriba / abajo e izquierda / derecha).

Algunos consejos

Consejo # 1 : Puede suavizar (o endurecer) el antialiasing escalando el lienzo (por ejemplo, por x) y luego aplicar la escala recíproca (1 / x) a las geometrías usted mismo (sin usar el lienzo).

Comparar (sin escala):

con (escala de lienzo: 0.75, escala manual: 1.33):

y (escala de lienzo: 1.33, escala manual: 0.75):

Consejo n. ° 2 : si lo que buscas es una apariencia irregular, trata de dibujar cada forma varias veces (sin borrar). Con cada extracción, los píxeles antialiasing se oscurecen.

Comparar. Después de dibujar una vez:

Después de dibujar tres veces:

Answer 2

Dibuja tus líneas de 1-pixel en coordenadas como ctx.lineTo(10.5, 10.5) . Dibujar una línea de un píxel sobre el punto (10, 10) significa que este 1 píxel en esa posición alcanza de 9.5 a 10.5 que da como resultado dos líneas que se dibujan en el lienzo.

Un buen truco para no siempre tener que agregar el 0.5 a la coordenada real que desea dibujar si tiene muchas líneas de un píxel, es ctx.translate(0.5, 0.5) todo su lienzo al principio.

Answer 3

Dibujaría todo usando un algoritmo de línea personalizado como el algoritmo de línea de Bresenham. Consulte esta implementación de javascript: http://members.chello.at/easyfilter/canvas.html

Creo que esto definitivamente resolverá tus problemas.

Answer 4

Observe un truco muy limitado. Si desea crear una imagen de 2 colores, puede dibujar cualquier forma que desee con el color # 010101 en un fondo con color # 000000. Una vez hecho esto, puede probar cada píxel en imageData.data [] y establecerlo en 0xFF, cualquiera que sea el valor que no sea 0x00:

imageData = context2d.getImageData (0, 0, g.width, g.height);
for (i = 0; i != imageData.data.length; i ++) {
    if (imageData.data[i] != 0x00)
        imageData.data[i] = 0xFF;
}
context2d.putImageData (imageData, 0, 0);

El resultado será una imagen en blanco y negro sin antialias. Esto no será perfecto, ya que se realizará un antialiasing, pero este antialiasing será muy limitado, el color de la forma será muy similar al del fondo.

Answer 5

Para las imágenes ahora hay context.imageSmoothingEnabled = false .

Sin embargo, no hay nada que controle explícitamente el dibujo lineal. Es posible que necesite dibujar sus propias líneas (por las malas ) usando getImageData y putImageData .

Answer 6

Quiero agregar que tuve problemas al reducir una imagen y dibujar en el lienzo, todavía estaba usando suavizado, a pesar de que no se usaba cuando se ampliaba.

Lo solucioné usando esto:

function setpixelated(context){
    context[''imageSmoothingEnabled''] = false;       /* standard */
    context[''mozImageSmoothingEnabled''] = false;    /* Firefox */
    context[''oImageSmoothingEnabled''] = false;      /* Opera */
    context[''webkitImageSmoothingEnabled''] = false; /* Safari */
    context[''msImageSmoothingEnabled''] = false;     /* IE */
}

Puede usar esta función de esta manera:

var canvas = document.getElementById(''mycanvas'')
setpixelated(canvas.getContext(''2d''))

Tal vez esto sea útil para alguien.

Answer 7

Se puede hacer en Mozilla Firefox. Agregue esto a su código:

contextXYZ.mozImageSmoothingEnabled = false;

En Opera, actualmente es una solicitud de función, pero es de esperar que se agregue pronto.

Answer 8

ctx.translate(0.5, 0.5);
ctx.lineWidth = .5;

Con este combo puedo dibujar lindas líneas finas de 1px.