web-dev-qa-db-fra.com

Dessiner une ligne de 1px d'épaisseur dans la zone de travail crée une ligne de 2px d'épaisseur

En ce jsfiddle il y a une ligne avec une largeur de ligne de 1.

http://jsfiddle.net/mailrox/9bMPD/350/

par exemple: 

ctx.lineWidth = 1;

Cependant, la ligne a une épaisseur de 2 pixels lorsqu’elle est dessinée sur le canevas. Comment créer une ligne d’une épaisseur de 1 pixel.

Je pouvais dessiner un rectangle (avec une hauteur de 1px), mais je souhaitais que la ligne fonctionne également en diagonale. Alors, comment obtenez-vous cette ligne à 1px haut?

Merci!

javascripthtml5canvaslinehtml5-canvas
39
Smickie

La toile calcule à partir de la moitié d'un pixel

ctx.moveTo(50,150.5);
ctx.lineTo(150,150.5);

Donc, à partir de la moitié va résoudre le problème

Version fixe: http://jsfiddle.net/9bMPD/357/

Cette réponse explique pourquoi cela fonctionne de cette façon.

86
Ferry Kobus

Vous pouvez également traduire par un demi-pixel dans les directions X et Y, puis utiliser des valeurs entières pour vos coordonnées (vous devrez peut-être les arrondir dans certains cas):

context.translate(0.5, 0.5)

context.moveTo(5,5);
context.lineTo(55,5);

Gardez à l'esprit que si vous redimensionnez votre toile, la traduction sera réinitialisée - vous aurez donc à traduire à nouveau.

Cette réponse explique pourquoi cela fonctionne de cette façon.

27
Richard

Ou en tant que this answer states, pour obtenir une largeur de 1, vous devez commencer par un demi-pixel.

ctx.moveTo(50.5,150.5);
ctx.lineTo(150.5,150.5);

http://jsfiddle.net/9bMPD/355/

7
tonycoupland

Avez-vous vu le premier coup sur Google ? (recherche de canvas line width 1px) . Même si je dois admettre que ce n'est pas exactement "propre" ou "maigre". Ferry Kobus ' la solution est beaucoup mieux. Encore une fois: c'est nul, vous devez utiliser "demi pixels" en premier lieu ...

3
RobIII

Le canevas peut tracer des lignes droites nettes avec fillRect () . Un rectangle d'une hauteur de 1px ou d'une largeur de 1px fait le travail . Il n'a pas besoin de valeur de demi-pixel:

var ctx = document.getElementById("myCanvas").getContext("2d");

ctx.drawVerticalLine = function(left, top, width, color){
    this.fillStyle=color;
    this.fillRect(left, top, 1, width);
};

ctx.drawHorizontalLine = function(left, top, width, color){
    this.fillStyle=color;
    this.fillRect(left, top, width, 1);
}

ctx.drawVerticalLine(150, 0, 300, "green");
ctx.drawHorizontalLine(0, 150, 300, "red");

https://jsfiddle.net/ynur1rab/

1
Tom Ah

La méthode fillRect () peut être utilisée pour dessiner de fines lignes horizontales ou verticales dans le canevas (sans avoir à appliquer le décalage de +0,5 sur les coordonnées):

this.fillRect(left, top, 1, height);
this.fillRect(left, top, width, 1);

Et vous pouvez réellement rendre les lignes encore plus minces en remplaçant simplement ce code par quelque chose comme: 

this.fillRect(left, top, 0.7, height);
this.fillRect(left, top, width, 0.7);

Les lignes seront plus fines (tendant à atteindre 1 pixel de large) mais leur couleur sera un peu atténuée.

-> exemple de travail

A noter que si nous définissons ctx.lineWidth = 0.7 (pour la séquence classique beginPath/moveTo/lineTo/stroke), cela ne fonctionne pas sur Chrome (0.7 et 1 sont interprétés de la même manière). C’est donc un intérêt pour cette méthode fillRect ().

0
Ghislain

Si aucune de ces réponses ne vous convient, vérifiez le zoom de votre navigateur. La mienne était en quelque sorte à 125%, donc chaque ligne de 1px était dessinée de 2px de large.

J'ai passé des heures à essayer de comprendre pourquoi chaque violon d'Internet fonctionnait et le mien ne fonctionnait pas (le zoom n'était réglé que pour mon onglet dev)

0
Curtis