HTML5 Habilidades de desenho de linha de tela - para desenhar uma linha fina que é larga por pixels

Comentário: Desenhe uma linha fina com uma largura de pixel. Ao usar a implementação da tela HTML5, preste atenção especial para garantir que todos os seus pontos de coordenadas sejam inteiros, caso contrário, o HTML5 alcançará automaticamente o Anti-Aliasing de borda. Amigos interessados ​​podem ver o diagrama de efeitos

ctx.LineWidth = 1;

ctx.BeginPath ();

ctx.moveto (10, 100);

ctx.lineto (300.100);

ctx.stroke ();

O resultado da operação não é uma linha de largura de pixel

Quão espessa é, e é comum ver vários efeitos de desenho de linha na versão da web

Muito diferente, você não achou que a tela HTML5 faria melhor?

De fato, a razão fundamental é que o desenho da tela não começa no meio.

Em vez disso, é desenhado de 0 a 1, não de 0,5 a 1 + 0 a 0,5, então

Isso leva ao desbotamento da borda e parece muito largo na fila.

Existem duas soluções, uma é o método de cobertura de desalinhamento e o outro é o centro

Tradução (0,5,0,5). O código de implementação é o seguinte:

Eu envolvi o método de sobreposição extraviado em uma função do contexto original

/**

* <p> Desenhe uma linha de pixels </p>

* @param fromx

* @param formy

* @param tox

* Toy @param

* @param BackgroundColor - o padrão é branco

* @param vertical - booleano

*/

CanvasRanderingContext2d.prototype.OnePixellineto = function (Fromx, Fromy, Tox, Toy, BackgroundColor, Vertical) {

var CurrentsTrokestyle = this.strokestyle;

this.BeginPath ();

this.moveto (fromx, fromy);

this.lineto (tox, brinquedo);

this.ClosePath ();

this.LineWidth = 2;

this.stroke ();

this.BeginPath ();

if (vertical) {

this.moveto (fromx+1, fromy);

this.lineto (tox+1, brinquedo);

} outro {

this.moveto (fromx, fromy+1);

this.lineto (tox, brinquedo+1);

}

this.ClosePath ();

this.LineWidth = 2;

this.strokestyle = BackgroundColor;

this.stroke ();

this.strokestyle = CurrentStrokestyle;

};

O código do método de tradução central é o seguinte:

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 atenção especial a garantir que todos os seus pontos de coordenadas sejam inteiros, caso contrário, o HTML5 implementará automaticamente a borda antialiasing

Isso faz com que um dos seus pixels pareça mais espesso.

Efeito de corrida:

Qual é o efeito agora? Esta é uma dica para desenhar linhas na tela HTML5

Se você acha que é bom, experimente.