Habilidades de dibujo de línea de lona HTML5: para dibujar una línea delgada que es amplia por píxeles

Comentario: dibuja una línea delgada con un ancho de píxel. Al usar la implementación del lienzo HTML5, preste especial atención para asegurarse de que todos sus puntos de coordenadas sean enteros, de lo contrario, HTML5 alcanzará automáticamente el antialiasing de borde. Los amigos interesados ​​pueden ver el diagrama de efectos

ctx.linewidth = 1;

ctx.beginpath ();

ctx.moveto (10, 100);

CTX.Lineto (300,100);

ctx.stroke ();

El resultado de la operación no es una línea de ancho de píxel

Qué grueso se siente, y es común ver varios efectos de dibujo de línea en la versión web

Muy diferente, ¿no creías que el lienzo HTML5 lo haría mejor?

De hecho, la razón fundamental es que el dibujo del lienzo no comienza desde el medio.

En cambio, se dibuja de 0 a 1, no de 0.5 a 1 + 0 a 0.5, entonces

Esto conduce al desvanecimiento en el borde y se ve muy ancho en la línea.

Hay dos soluciones, una es el método de cobertura de desalineación, y el otro es el centro

Traducción (0.5,0.5). El código de implementación es el siguiente:

He envuelto el método de superposición fuera de lugar en una función del contexto original

/**

* <p> Dibuja una línea de píxel </p>

* @param fromx

* @param formy

* @param tox

* @param juguete

* @param BackgroundColor - El valor predeterminado es blanco

* @param vertical - booleano

*/

CanvasrenderingContext2d.prototype.onePixellIneto = function (fromx, fromy, tox, juguete, backgroundcolor, vertical) {

var correnStrokeStyle = this.StrokeStyle;

this.beginpath ();

this.moveto (fromx, fromy);

this.lineto (tox, juguete);

this.ClosePath ();

this.linewidth = 2;

this.stroke ();

this.beginpath ();

if (vertical) {

this.moveto (fromx+1, fromy);

this.lineto (tox+1, juguete);

} demás {

this.moveto (fromx, fromy+1);

this.lineto (tox, juguete+1);

}

this.ClosePath ();

this.linewidth = 2;

this.StrokeStyle = BackgroundColor;

this.stroke ();

this.StrokeStyle = CurrentStrokeStyle;

};

El código del método de traducción central es el siguiente:

ctx.save ();

ctx.translate (0.5,0.5);

ctx.linewidth = 1;

ctx.beginpath ();

ctx.moveto (10, 100);

CTX.Lineto (300,100);

ctx.stroke ();

ctx.restore ();

Preste especial atención a asegurarse de que todos sus puntos de coordenadas sean enteros, de lo contrario, HTML5 implementará automáticamente Antialiasing Edge

Esto hace que uno de sus píxeles se vea más grueso.

Efecto de ejecución:

¿Cuál es el efecto ahora? Este es un consejo para dibujar líneas en el lienzo HTML5

Si crees que es bueno, pruébalo.