Compétences de dessin de ligne de toile HTML5 - Pour tracer une fine ligne large par pixels

Commentaire: tracez une ligne mince avec une largeur de pixel. Lorsque vous utilisez la mise en œuvre du canevas HTML5, accordez une attention particulière à vous assurer que tous vos points de coordonnées sont des entiers, sinon HTML5 atteindra automatiquement l'anti-aliasage des bords. Les amis intéressés peuvent voir le schéma d'effet

ctx.linewidth = 1;

ctx.beginPath ();

ctx.moveto (10, 100);

ctx.lineto (300,100);

ctx.stroke ();

Le résultat de l'opération n'est pas une ligne de largeur de pixels

Quelle est l'épaisseur, et il est courant de voir divers effets de dessin de ligne sur la version Web

Très différent, ne pensiez-vous pas que la toile HTML5 le ferait mieux?

En fait, la raison fondamentale est que le dessin de la toile ne commence pas du milieu.

Au lieu de cela, il est tiré de 0 à 1, pas de 0,5 à 1 + 0 à 0,5, donc

Cela mène au fondu sur le bord et a l'air très large en ligne.

Il y a deux solutions, l'une est la méthode de la couverture de désalignement, et l'autre est le centre

Traduction (0,5,0,5). Le code d'implémentation est le suivant:

J'ai enveloppé la méthode de superposition mal placée en fonction du contexte d'origine

/ **

* <p> tracez une ligne de pixel </p>

* @param fromx

* Formy @param

* @param tox

* @param jouet

* @param backgroundColor - la valeur par défaut est blanche

* @param vertical - booléen

* /

CanvasrederingContext2d.prototype.onepixellineto = fonction (fromx, fromy, tox, jouet, backgroundColor, vertical) {

var currentStrokestyle = this.strokestyle;

this.beginPath ();

this.moveto (fromx, fromy);

this.lineto (tox, jouet);

this.closepath ();

this.linewidth = 2;

this.stroke ();

this.beginPath ();

if (vertical) {

this.moveto (Fromx + 1, fromy);

this.lineto (tox + 1, jouet);

} autre {

this.moveto (fromx, fromy + 1);

this.lineto (tox, jouet + 1);

}

this.closepath ();

this.linewidth = 2;

this.strokestyle = backgroundColor;

this.stroke ();

this.strokestyle = currentStrokestyle;

};

Le code de la méthode de traduction centrale est le suivant:

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 ();

Portez une attention particulière à vous assurer que tous vos points de coordonnées sont des entiers, sinon HTML5 implémentera automatiquement les anciens de bord

Cela fait que l'un de vos pixels a l'air plus épais.

Effet de course:

Quel est l'effet maintenant? Ceci est un conseil pour dessiner des lignes dans la toile HTML5

Si vous pensez que c'est bon, essayez-le.