HTML5 Canvas implémente le dessin d'une ligne fine d'un pixel de large

Tracez une ligne fine de la largeur d'un pixel. Lorsque vous utilisez HTML5 Canvas pour l'implémenter, veillez particulièrement à ce que tous vos points de coordonnées soient des nombres entiers. Sinon, HTML5 implémentera automatiquement l'anticrénelage des bords. Les amis intéressés peuvent y jeter un œil. le rendu

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'exécution n'est pas une ligne avec une largeur de pixel

On dirait si épais, et les différents effets de dessin au trait que nous voyons souvent sur les pages Web sont très différents. Se pourrait-il que HTML5 Canvas n'ait pas pensé à faire mieux

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

est dessiné de 0 à 1, pas 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 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 de dislocation Je l'ai empaqueté dans une fonction du contexte d'origine

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

/** 
* <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; 
};

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

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

, ce qui fera apparaître votre ligne droite d'un pixel plus épais.

Effet de fonctionnement :

Comment est l'effet 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.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

html5 Implémentation du canevas pour dessiner des chemins non fermés et des méthodes de remplissage en dégradé

html5 Implémentation du canevas Dessiner des lignes droites et définir les styles de ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!