Tutoriel de dessin sur toile html5 (2) : Dessiner des lignes droites et définir des styles de ligne tels que les compétences du didacticiel color/endpoint/intersection

Si vous ne savez toujours pas ce qu'est Canvas, vous pouvez lire l'article précédent Lors de l'apprentissage du dessin, les lignes sont les plus élémentaires, et la connexion des lignes peut former n'importe quel graphique. La même chose est vraie dans Canvas.
Avant de commencer, sortons la toile et les pinceaux :

Copiez le codeLe code est le suivant :

var cvs = document.getElementById('cvs'); // Canvas
var ctx = cvs.getContext('2d'); // Pinceau

Tirons au sort Lors de l'écriture, le point de départ n'est pas fixe et peut changer à tout moment. Bien que Canvas ne détermine pas le point d’écriture à la main, il existe une méthode : moveTo. La fonction de moveTo équivaut à soulever la pointe du stylet de la toile, puis à la déplacer vers le point spécifié (c'est-à-dire les coordonnées).

Copier le codeLe code est le suivant :

ctx.moveTo(x, y)

Aucun graphique ne sera dessiné pendant ce processus, ce qui équivaut à tenir le stylo suspendu sur la toile.
Mais ça ne sert à rien de traîner, il faut commencer à dessiner. Dessinons d'abord la plus simple : une ligne droite
La méthode pour tracer une ligne droite est lineTo. Ses paramètres sont les mêmes que moveTo, qui est un point.
ctx.lineTo(x,y) Bien sûr, lorsque vous tracez une ligne, le point d'écriture se déplace également, donc après lineTo, le point d'écriture devient son point cible.

Copier le codeLe code est le suivant :

ctx.moveTo(100,100) ;
ctx.lineTo(200,100);

Lorsque vous actualisez la page Web, vous constaterez qu'il n'y a aucune ligne attendue sur le canevas, rien du tout. Parce qu'il nous manque une étape, lineTo est en fait un "chemin" dessiné, lui-même invisible. Si l'on veut qu'il soit exposé, il faut le "dessiner".
Les étudiants qui ont utilisé PS connaîtront certainement les deux modes graphiques, l'un est le remplissage et l'autre le contour. Maintenant que nous avons tracé une ligne, cela équivaut à tracer un chemin dans PS. À ce stade, nous pouvons dessiner le bord du chemin et les graphiques seront affichés.
La méthode de trait du canevas est Stroke(). Complétons maintenant le code :

Copier le code Le code est la suivante :

ctx.moveTo(100,100);
ctx.lineTo(200,100);

ctx.stroke(); vous pouvez scier une ligne. Bien sûr, vous pouvez également tracer des centaines de chemins en continu, puis effectuer l'action de trait pour tracer des centaines de lignes à la fois. Dessinons maintenant un rectangle de 4 lignes :

Copiez le code Le code est le suivant :

ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200); ;
ctx.Stroke();

Ici, nous dessinons d'abord le chemin entier, puis nous le traitons en même temps.

——–Plainte de l'auteur : un inconvénient du dessin sur toile est qu'il est essentiellement basé sur des suppositions, ce qui est très peu intuitif.
Rappel sérieux : le processus de dessin sur toile (c'est-à-dire le remplissage et le tracé) consomme beaucoup de ressources. Si vous souhaitez économiser les ressources du système et améliorer l'efficacité, il est préférable de dessiner tous les chemins, puis de remplir ou de tracer les graphiques en même temps.
Nous pouvons voir sur le graphique ci-dessus que l'épaisseur de ligne par défaut est de 1 px et que la couleur de la ligne est noire. Bien sûr, nous pouvons les définir, mais ce qui est étrange, c'est que la définition de la largeur de ligne est lineWidth, mais la définition du style de ligne s'appelle StrokeStyle. Pourquoi pas lineStyle ? Je ne sais pas non plus. :

Copier le code Le code est le suivant :

ctx.lineWidth = 10 ;

ctx.StrokeStyle = 'rgba(255,0,0,0.5)'

Le code ci-dessus définit la largeur de ligne sur 10 px et la couleur de ligne sur rouge translucide.

Comme le montre la figure 1, actualisez-le, quelque chose ne va pas ! Pourquoi y a-t-il un petit morceau manquant dans le coin supérieur gauche ? Ce n'est pas une illusion. La raison commence par la méthode de dessin au trait du canevas.
Question : Si le chemin rectangulaire que je dessine a une largeur et une hauteur de 100 et que la largeur de ma ligne latérale est de 10 px, quelles sont la largeur et la hauteur totales du rectangle avec les côtés dessinés ? Est-ce 100 10*2=120 ?
Si le bord est complètement tracé en dehors du chemin, il fera 120. Mais Canvas ne l’est pas. Toutes les lignes dans Canvas ont une "ligne médiane", située au milieu absolu de la ligne. Les traits de la ligne s'étendent des deux côtés à partir de la ligne centrale. Par exemple, si la largeur de votre ligne est de 1, alors la ligne centrale est de 0,5 ; si la largeur est de 5, alors la ligne centrale est de 2,5. Lorsque les graphiques de la toile sont tracés, le tracé est aligné avec la ligne centrale de la ligne, puis tracé. Comme le montre la figure 2 :

Tutoriel de dessin sur toile html5 (2) : Dessiner des lignes droites et définir des styles de ligne tels que les compétences du didacticiel color/endpoint/intersection_html5

Ainsi, lors du traçage, la moitié de la ligne est à l'extérieur et l'autre moitié à l'intérieur. Autrement dit, la largeur totale du rectangle ci-dessus est de 100 (10/2)*2, ce qui est égal à 110.
C'est pour cette raison que le coin supérieur gauche. Il est naturel que les coins paraissent ébréchés. Parce que personne ne peint ici.
Mais pourquoi le reste des coins ne sont-ils pas crantés ? Ne semble-t-il pas y avoir des trous aux quatre coins de votre photo ?
C’est parce que je n’ai pas « soulevé » le pinceau lorsque je traçais la ligne. Le pinceau était continu, c’est-à-dire qu’il n’y avait pas de déplacement. Si vous n'y croyez pas, passons maintenant :

Copiez le code

Le code est le suivant :

ctx. moveTo(100,100);
ctx.lineTo(200,100);
ctx.moveTo(200,100); //Faites attention ici
ctx.lineTo(200,200); 🎜>ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)'; >ctx.Stroke();

Nous avons moveTo avant de tracer la deuxième ligne, et les coordonnées de moveTo n'ont pas changé. C'était toujours le même point, mais après rafraîchissement, le graphique est devenu comme ça [. Photo 3] :

Compris ? Parce que nous avons levé la plume.

Maintenant, supprimons moveTo et cessons de nous en soucier. Réfléchissons à la manière de remplir le coin manquant dans le coin supérieur gauche ?
Tout d’abord, permettez-moi de poser une question : notre chemin est-il fermé ? N’est-ce pas absurde ? N’avons-nous pas déjà fait le tour du chemin vers le point d’origine ? Bien sûr, c'est fermé !
Faux ! Cela fait seulement coïncider le dernier point du chemin avec le point de départ, mais le chemin lui-même n'est pas fermé !
Comment fermer le chemin dans Canvas ? Utilisez closePath().

Copiez le codeLe code est le suivant :

ctx.moveTo( 100 100);

ctx.lineTo(200 100);
ctx.lineTo(200 200);
ctx.lineTo(100 200); ctx.closePath( );//Chemin fermé
ctx.lineWidth = 10;
ctx.StrokeStyle = 'rgba(255,0,0,0.5)';
ctx.Stroke(); >

Rafraîchissez à ce moment et ce sera un carré parfait. Figure 4 :

Peu importe l'épaisseur des lignes, plus les lignes sont épaisses, plus les gens les aiment, n'est-ce pas ? ————Les quatre coins de ce carré sont des angles droits réguliers et ne seront pas arrondis. Et les coins arrondis ? Veuillez regarder le trait carré dans PS, figure 5 :

Comme vous pouvez le constater, plus le bord est épais, plus l'arc de ses coins est grand.
Si je veux que les bords de Canvas soient les mêmes que ceux de PS, y a-t-il un moyen ? Bien sûr, il s'agit de l'attribut lineJoin.
lineJoin, c'est-à-dire l'intersection des lignes, a trois attributs : mitre (par défaut, coin pointu), biseau (biseau), rond (coin arrondi), comme le montre la figure 6 :

Là Il n'y a aucun doute qu'on peut comprendre tout de suite que notre rectangle a des coins pointus, alors essayez de le changer en coins arrondis :
Le graphique devient comme ça, Figure 7 :

Un peu comme PS , droite?
De plus, d'après la photo précédente, nous savons que les extrémités des lignes du Canvas sont plates. Cela peut-il être modifié ? Après tout, c’est plat et ça n’a pas l’air bien.
est également possible, c'est-à-dire l'attribut lineCap, qui définit le point final de la ligne. lineCap a 3 valeurs : bout (plat, par défaut), rond (cercle), carré (carré), comme le montre la figure 8

Vous pouvez découvrir en regardant l'image qui est en fait la tête plate et la tête carrée sont les mêmes. La seule différence est que la tête plate ne dépasse pas tellement. La tête ronde et la tête carrée ressortiront pendant un moment. Quelle est la longueur de cette section ? C'est la moitié de la largeur de la ligne.
Avez-vous pensé à quelque chose ? Haha, pour le problème de chemin fermé précédent, si nous définissons lineCap sur une tête carrée, l'effet sera le même !
Mais par souci de sécurité, nous devons quand même fermer le chemin, rappelez-vous !
Je tiens également à vous le rappeler : un chemin fermé n'a pas d'extrémité ! Par conséquent, le style du point de terminaison n’est pas visible sur un chemin fermé.
Aussi : lineCap est un peu similaire à lineJoin, attention à ne pas les confondre.
Si vous avez un œil vif et que vous n'avez pas de chance, vous constaterez peut-être que parfois la ligne de 1 pixel n'a pas 1 pixel de large, mais semble plus large et floue. Comme le montre la figure 9 :

Félicitations ! Vous avez rencontré un bug qui n'en est pas un. C’est très spécial. J’en parlerai dans le prochain article.