Détails du code pour dessiner une ligne fine de la largeur d'un pixel dans HTML5 Canvas

Le code suivant dans le canevas HTML5 orthodoxe

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 d'une largeur d'un pixel

C'est si épais. C'est très différent des différents effets de lignes de dessin souvent vus sur la version Web

. Est-ce du HTML5 ? Canvas ne s'attendait pas à faire mieux

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

mais de 0~ 1. Il n'est pas dessiné de 0,5 à 1 0 à 0,5, donc

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

Il existe deux solutions, l'une est la méthode de couverture 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 empaqueté dans une fonction du contexte d'origine

/**
 * <p> draw one pixel line </p>
 * @param fromX
 * @param formY
 * @param toX
 * @param toY
 * @param backgroundColor - default is white
 * @param vertical - boolean
 */
CanvasRenderingContext2D.prototype.onePixelLineTo = function(fromX, fromY, toX, toY, backgroundColor, vertical) {
	var currentStrokeStyle = this.strokeStyle;
	this.beginPath();
	this.moveTo(fromX, fromY);
	this.lineTo(toX, toY);
	this.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.lineTo(toX, toY+1);
	}
	this.closePath();
	this.lineWidth=2;
	this.strokeStyle=backgroundColor;
	this.stroke();
	this.strokeStyle = currentStrokeStyle;
};

center Le code de la méthode de traduction 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();

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

Cela donne également à l'une de vos lignes droites de pixels un aspect plus épais.

Effet de l'opération :

Quel est l'effet maintenant ? Il s'agit d'une ligne HTML5 Canvas ? dessin Un petit truc

Si vous pensez que c'est bien, n'hésitez pas à mettre un pouce bleu.

Ce qui précède contient les détails du code permettant de tracer une ligne fine de la largeur d'un pixel dans HTML5 Canvas. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois (www .php.cn) !