Maison > Article > interface Web > 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
/** * <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; };
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 ligneCe 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!