Si vous ne savez pas encore ce que toi sur toile, vous pouvez consulter l'article précédent.
Lors de l'apprentissage de la traction, les lignes sont les plus élémentaires et la connexion des lignes peut former n'importe quelle forme. Il en va de même dans la toile.
Avant de commencer, nous sortons la toile et les pinceaux:
var cvs = document.getElementById ('cvs'); //Toile
var ctx = cvs.getContext ('2d'); // Brosse
Lorsque nous dessinons, le point de stylo n'est pas fixé et changera à tout moment. Bien que Canvas ne détermine pas le point d'écriture à travers les mains, il existe également une méthode, qui est MoveTo. MoveTo équivaut à soulever la pointe du stylo hors de la toile et à le déplacer vers le point spécifié (c'est-à-dire les coordonnées).
ctx.moveto (x, y)
Aucun graphisme n'est dessiné pendant ce processus, ce qui équivaut à se balancer sur la toile avec votre stylo.
Mais il est inutile de se balancer, nous devons commencer à dessiner. Dessinez les lignes les plus simples: lignes droites
La méthode pour dessiner une ligne droite est Lineto. Ses paramètres sont les mêmes que MoveTo, et ils sont tous les deux le même point.
ctx.lineto (x, y) Bien sûr, lorsque vous tracez une ligne, le point de stylo se déplace également, donc après Lineto, le point de stylo devient son point cible.
ctx.moveto (100 100);
CTX.lineto (200 100);
Pour le moment, vous actualisez la page Web et vous constaterez qu'il n'y a pas de ligne attendue sur la toile et rien. Parce que nous avons un pas de moins. Si nous voulons qu'il le montre, nous devons le dessiner.
Les étudiants qui ont utilisé PS connaîtront certainement les deux modes des graphiques, l'un est rempli et l'autre est un coup. Maintenant, nous avons tracé une ligne, ce qui équivaut à dessiner un chemin dans PS. Pour le moment, nous pouvons dessiner les bords du chemin et la figure sera affichée.
La méthode de la troupe de toile est un AVC (). Maintenant, terminons le code:
ctx.moveto (100 100);
CTX.lineto (200 100);
ctx.stroke (); actualiser à ce moment et vous pouvez voir une ligne. Bien sûr, vous pouvez également dessiner des centaines de chemins successivement, puis effectuer des actions de l'AVC pour tracer des centaines de lignes à la fois. Maintenant, dessinons un rectangle avec 4 lignes:
ctx.moveto (100 100);
CTX.lineto (200 100);
CTX.lineto (200 200);
ctx.lineto (100 200);
ctx.lineto (100 100);
ctx.stroke ();
Ici, nous dessinons d'abord tous les chemins, puis nous les faisons les uns après les autres.
- La plainte de l'auteur: l'une des mauvaises choses à propos du dessin sur toile est qu'elle dépend essentiellement de la devinettes, et ce n'est pas intuitif.
Astuce sérieuse: Le processus de dessin de la toile (c'est-à-dire le remplissage et le coup) est très consommateur de ressources. Si vous souhaitez enregistrer les ressources du système et améliorer l'efficacité, il est préférable de dessiner tous les chemins et de remplir ou de caresser le chiffre immédiatement.
D'après la figure ci-dessus, nous pouvons voir que l'épaisseur de ligne par défaut est de 1 pixe, tandis que la couleur de ligne est noire. Bien sûr, nous pouvons les définir, mais ce qui est étrange, c'est que la largeur de ligne est la largeur de ligne, tandis que le style de ligne est appelé strokestyle. Pourquoi pas la linyle? Je ne sais pas non plus. :
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
Le code ci-dessus définit la largeur de ligne sur 10px et la couleur de ligne devient rouge translucide.
Comme le montre la figure 1, actualisez-le, il semble que quelque chose ne va pas! Pourquoi semble-t-il qu'une petite pièce manque dans le coin supérieur gauche? Ce n'est pas une illusion. La raison commence par la façon dont le dessin de ligne de toile.
Question: Si le chemin du rectangle que je dessine est de 100 de largeur et de hauteur, et que ma largeur de ligne de bord est de 10px, alors quelle est la largeur et la hauteur globales de ce rectangle avec le bord dessiné? Est-ce 100 + 10 * 2 = 120?
Si le bord est complètement dessiné à l'extérieur du chemin, il est 120. Mais la toile ne l'est pas. Les lignes en toile ont une ligne médiane, qui est située au milieu absolu de la ligne, et les traits de la ligne s'étendent aux deux côtés avec la ligne médiane. Par exemple, si la largeur de votre ligne est 1, la ligne centrale est à 0,5; Si la largeur est de 5, alors la ligne médiane est à 2,5. Lorsque la figurine est caresse, le chemin s'adapte à la ligne médiane de la ligne, puis des coups. Comme le montre la figure 2:
Par conséquent, lorsqu'il est caressé, la moitié de la ligne est à l'extérieur et la moitié est à l'intérieur, c'est-à-dire que la largeur globale du rectangle supérieur est de 100+ (10/2) * 2, ce qui est égal à 110.
C'est précisément pour cette raison qu'il est naturel d'avoir un coin manquant dans le coin supérieur gauche. Parce que personne ne l'a peint ici.
Mais pourquoi n'y a-t-il pas de lacunes dans les coins restants? Regardez votre photo, n'y a-t-il pas de lacunes dans les quatre coins?
C'est parce que je n'ai pas soulevé le pinceau pendant le dessin des lignes, et que les pinceaux étaient continus, c'est-à-dire que je n'ai pas Moveto auparavant. Si vous ne le croyez pas, Moveto maintenant:
ctx.moveto (100 100);
CTX.lineto (200 100);
CTX.Moveto (200 100); // note 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 bougé avant de tracer la deuxième ligne, et les coordonnées du MoveTo n'ont pas changé, et c'est toujours le même point, mais après rafraîchissement, la figure devient comme celle-ci [figure 3]:
Compris? Parce que nous avons levé le stylo.
Maintenant, supprimons MoveTo, ne vous inquiétez pas, réfléchissons à la façon 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 des bêtises? N'avons-nous pas déjà ramené le chemin à l'origine? Bien sûr, il est fermé!
faux! Cela ne fait que le dernier point du chemin chevauchant le point de départ, mais le chemin lui-même n'est pas fermé!
Comment fermer le chemin en toile? Utilisez ClosePath ().
ctx.moveto (100 100);
CTX.lineto (200 100);
CTX.lineto (200 200);
ctx.lineto (100 200);
ctx.lineto (100 100);
ctx.closepath (); // chemin fermé
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Rafraîchissant à ce moment fera de vous un carré parfait. Figure 4:
Peu importe à quel point nous changeons d'épaisseur - plus les gens sont épaissants, plus les gens les aiment, non? - Les quatre coins de ce carré sont des angles droits réguliers et ne seront pas lisses. Quel est le cas avec un coin lisse? Veuillez consulter le coup carré dans PS, figure 5:
Je l'ai vu. Plus le bord est épais, plus l'arc de son angulaire est grand.
Si je pense que les lignes de bord de la toile sont les mêmes que celles de PS, y a-t-il un moyen? Bien sûr, il y a l'attribut linejoin.
LineJoin, qui signifie l'intersection des lignes, a 3 propriétés: mitre (par défaut, coin tranchant), biseau (biseau) et rond (rond), comme le montre la figure 6:
Il ne fait aucun doute que nous pouvons comprendre que notre rectangle utilise des coins nets, alors essayez de le changer dans des coins arrondis:
Les graphiques sont devenus comme ça, figure 7:
C'est un peu comme PS, non?
De plus, à partir de l'image précédente, nous avons appris que les deux extrémités de la ligne de toile sont plates, peut-elle être changée? Après tout, ce n'est pas beau.
Il est également possible, c'est-à-dire la propriété LineCap, qui est le point de terminaison qui définit la ligne. LineCap a 3 valeurs: Butt (plat, par défaut), rond (cercle), carré (carré), comme le montre la figure 8
Vous pouvez constater que la tête plate est en fait la même que la tête carrée, la seule différence est que la tête plate n'est pas étirée. La tête ronde et la tête carrée sont étirées dans un morceau. Combien de temps dure cette section? C'est la moitié de la largeur de la ligne.
Avez-vous déjà pensé à quelque chose? Haha, le problème de chemin fermé précédent, si nous définissons LineCap comme en-tête carré, l'effet sera le même!
Mais pour être sûr, nous devons encore fermer le chemin, rappelez-vous!
Je veux aussi vous rappeler: le chemin fermé n'a pas de points de terminaison! Le style du point de terminaison n'est donc pas visible sur le chemin fermé.
De plus : LineCap est un peu similaire à LineJoin, veillez à ne pas jouer.Si vous avez des yeux pointus et que vous avez de la malchance, vous pouvez constater que parfois les lignes de 1 pixel ne mesurent pas 1 pixel, mais semblent être plus larges et floues. Comme le montre la figure 9:
Félicitations! Vous avez rencontré un bug qui n'était pas un bug. C'est très spécial, je vais le mettre dans le prochain article