Compétences en dessin au trait HTML5 Canvas - dessiner une ligne fine d'un pixel de large_html5 compétences du didacticiel

Le code suivant dans le canevas HTML5 orthodoxe

Copiez le code

Le code est le suivant :

ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(300,100); 🎜>

La ligne tracée à la suite de l'opération n'est pas une ligne d'une largeur d'un pixel

Elle semble si épaisse Elle est très différente des différents dessins au trait. effets souvent vus sur la version web
Pareil, HTML5 Canvas n'a-t-il pas pensé à faire mieux

En fait, la raison fondamentale est que le dessin de Canvas ne part pas du milieu ?

mais de 0 à 1, pas de 0,5 à 1 0 ~ 0,5 méthode de dessin, donc

fait en sorte que le fondu soit au bord et que la ligne semble très large.

Il existe deux solutions, l'une est la méthode de recouvrement des luxations et l'autre est la translation centrale

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

Méthode de couverture des luxations Je l'ai enveloppé dans une fonction du contexte d'origine

Copier le code Le code est le suivant :

/**

*

tracez une ligne de pixels

* @param fromX
* @param formY
* @param toX
* @param toY
* @param backgroundColor - par défaut est blanc
* @param vertical - booléen
*/
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertical) {
var currentStrokeStyle = this.StrokeStyle;
this.beginPath();
this.moveTo(fromX, fromY); .closePath();
this.lineWidth=2;
this.stroke();
this.beginPath();
if(vertical) {
this.moveTo(fromX 1, fromY);
this.lineTo(toX 1, toY);
} else {
this.moveTo(fromX, fromY 1); >}
this.closePath ();
this.lineWidth=2;
this.StrokeStyle=backgroundColor;
this.StrokeStyle = currentStrokeStyle; };


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





Copiez le code

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

Faites particulièrement attention à vous assurer que tous vos points de coordonnées sont des nombres entiers, sinon HTML5 implémentera automatiquement l'anticrénelage des bords

fera paraître l'une de vos lignes droites de pixels plus épaisse.

Effet de fonctionnement :


À quoi ça ressemble maintenant ? C'est une petite astuce pour le dessin au trait HTML5 Canvas

S'il vous plaît, donnez-lui un coup de pouce si cela sonne. bien.