Tutoriel de dessin sur toile html5 (3) : La raison pour laquelle les lignes de 1 pixel sont floues sur les compétences du didacticiel canvas_html5

Dans la continuité de l'article précédent Tutoriel de dessin de lignes sur toile
Comme nous l'avons mentionné la dernière fois, la toile comporte parfois des lignes de 1 pixel qui sont floues et semblent plus larges, comme indiqué ci-dessous :

Une telle ligne n'est évidemment pas ce que nous souhaitons.
Le but de cet article est de clarifier le principe et de le résoudre.
Tout le monde sait que la plus petite taille d'affichage sur l'écran est de 1 pixel. Bien que les éléments inférieurs à 1 pixel puissent ne pas être affichés, l'ordinateur s'en fiche, il essaiera de les dessiner.
En fait, les pixels sont aussi une unité après tout. Que se passerait-il si nous agrandissions la toile à une taille suffisamment grande pour voir clairement chaque pixel ? Cela ressemble probablement à ceci :

Chaque pixel a une plage de début et de fin, comme le montre la figure, leur plage commence à gauche, s'étend sur 1 pixel et se termine à droite.
Si nous suivons la plage de pixels de début et de fin lorsque nous traçons une ligne de 1 pixel, nous obtiendrons certainement une ligne fine très standard. Comme suit :

Mais malheureusement, la méthode de dessin des lignes de la toile est différente. Comme nous l'avons dit dans l'article précédent, chaque ligne de toile a une "ligne centrale" infiniment fine, et la largeur de la ligne s'étend de la ligne centrale aux deux. côtés. Si nous traçons toujours une ligne à partir du deuxième pixel, alors la ligne centrale de la ligne sera alignée avec le point de départ du deuxième pixel, puis nous commencerons à dessiner, et le problème se pose : la ligne du Canvas s'étend des deux côtés. à partir de la ligne médiane. Au lieu de s'étendre vers un certain côté (par exemple, ici, si elle ne s'étend que vers la droite, alors notre problème n'est plus un problème), après extension, notre ligne ressemble en fait à ceci :

Il y avait un autre problème à ce moment-là : l'ordinateur n'autorise pas les graphiques inférieurs à 1 px, il a donc fait un compromis : dessiner les deux pixels.
Ainsi, de cette façon, la ligne originale de 1 px devient une ligne qui semble avoir une largeur de 2 px.
La raison de l'échec a été trouvée : la ligne dans le canevas a aligné la ligne centrale avec le point de départ du pixel, et non avec le point médian du pixel.
Alors, comment résoudre ce problème douloureux ? Peut-être que quelqu'un a déjà pensé : puisque les points de départ des deux sont différents, faisons en sorte que leurs points de départ soient identiques !
Il nous suffit d'aligner la ligne centrale de la ligne avec le point médian du pixel !
Le point milieu du pixel est facile à trouver. Par exemple, le point milieu du deuxième pixel est situé à 1,5 pixels selon l'explication sur l'image Alors le point milieu du pixel x est (x-0,5. )px.


Bien entendu, dans des situations moins rigoureuses, vous pouvez également utiliser x 0,5.
Essayons maintenant nos résultats de recherche sur toile.

Copier le code

Le code est le suivant :

ctx.moveTo(100.5, 100,5);
ctx.lineTo(200,5,100,5);
ctx.lineTo(200,5,200,5);
ctx.lineTo(100,5,200,5); ;
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(255,0,0,0.5)'; >

Ça a l'air bien ? Mais il semble que cela nous rende très confus au moment de tracer la ligne. Devons-nous ajouter ce 0,5 déprimant à chaque fois ? Bien sûr que non, car la plupart du temps nous utilisons des variables pour sauvegarder des valeurs, nous n'avons pas besoin d'ajouter 0,5 à chaque valeur

De plus, pour les lignes avec lineWidth>1, nous n'avons pas à nous en soucier : car ce n'est que lorsque la largeur de ligne est de 1px que ce problème est le plus évident.