API Canvas - Dessiner les traits, arcs, cercles et polygones

Bonjour à tous et bienvenue dans cette nouvelle leçon sur l'API Canvas. Lors de la dernière vidéo, nous avons vu comment créer un espace de travail et comment déclarer un contexte de rendu ou contexte de dessin. Nous avons ensuite commencé à dessiner les formes géométriques de base, en l'occurrence les rectangles. Aujourd'hui, nous allons voir comment dessiner les formes de base restantes, c'est-à-dire les cercles et arcs, et les traits et les polygones qui regroupent toutes les formes fermées qui disposent de côtés y compris les triangles. À la fin, nous allons encore voir un exemple qui peut s'avérer pratique dans certains projets web. Nous avons conservé la même balise Canvas de la dernière fois. Maintenant on va s'attaquer au JavaScript. Au chargement de la page, on crée le contexte de dessin. Qu'on associe à la balise canvas identifiée par canvas. Le contexte, bien entendu, c'est 2D comme la dernière fois. Ensuite, on va déclarer les couleurs respectives du contour et du fond. Stroke style, c'est pour déclarer le contour. Là, c'est une nuance de bleu. Et pour le fond, c'est une nuance d'orange. Et puisqu'on aura des contours, donc on va spécifier leur épaisseur. Par exemple 2 pixels. Je rappelle que nous avons traité en détail ces attributs lors de la dernière vidéo. Maintenant on va commencer par intégrer notre forme de base qui est un arc, bien entendu que l'on peut étendre à un cercle complet. Pour dessiner un arc, on fait appel à la méthode arc qui contient les arguments suivants: l'abscisse et l'ordonnée du centre, dans ce cas on va spécifier 300, 300 pour se centrer au sein de l'image. Le rayon, dans ce cas je mettrai 100 pixels. Les paramètres restants sont l'angle de début et l'angle de fin, sachant que ces angles évoluent dans le sens horaire. On mettra 0 pour l'angle de début et pour l'angle de fin on mettra par exemple la valeur π. Il convient de mentionner que les angles sont spécifiés en radians, donc je mettrai ici Math.PI que nous avons déjà vu en JavaScript. De cette manière on va créer une sorte de demi-cercle. Ensuite, on va spécifier si on veut un cercle ou un disque, c'est-à-dire un cercle plein. Pour un cercle, on va se contenter de la bordure comme ça. Donc la méthode stroke permet d'indiquer que le cercle qui va être créé sera creux. Mais si on fait que ces 2 instructions, ça ne marchera pas parce qu'il faut indiquer au navigateur quand est-ce que je commence le dessin et quand est-ce que j'aurai fini. Alors avant d'intégrer l'arc, on fait appel à la méthode beginPath. Et à la fin de dessin, on mettra close path. En règle générale, c'est comme ça qu'on fait pour dessiner des arcs ou bien des cercles. Vous mettez begin path, close path, et entre les deux, vous dessinez ce que vous souhaitez. Exécutons. Alors, on aura le cercle comme ça, donc il commence à cette position. L'angle 0, il finit à la position π dans le sens horaire. Et si vous voulez évoluer dans le sens antihoraire, il suffit de spécifier un dernier paramètre qui est un booléen, qui est facultatif dans ce cas, avec la valeur true. Dans ce cas, notre cercle évolue dans le sens antihoraire, l'angle 0 et l'angle π. Bon, on va retirer ça pour le moment. Et si par exemple vous voulez créer un quart de cercle, alors on va diviser l'angle de fin par 2. Dans ce cas, notre arc commence à la position 0 et finit à la position π/2. On obtient ceci. Et pour un cercle complet, bien sûr, c'est 2π. Comme ça. Et voilà. Maintenant, c'est un cercle creux. Si vous voulez le remplir, Il suffit de mettre à la place de stroke fill comme ça. Et maintenant c'est plein. Bien sûr on peut combiner les deux pour avoir un cercle plein, c'est-à-dire un disque, mais aussi une bordure. Dans ce cas on mettra context stroke. Alors on a un remplissage et le contour. Alors ça c'est ce qui concerne les cercles et les arcs. Maintenant on va voir comment dessiner les traits et les polygones. On va bien sûr conserver le contexte de rendu, les couleurs de remplissage et de fond et l'épaisseur de la ligne. Comme pour les cercles et les arcs, il faut indiquer au navigateur que l'on va commencer le dessin toujours grâce à beginPath. Comme ça. Et quand on aura fini, on va mettre closePath. C'est entre les deux qu'on va dessiner notre forme. Pour dessiner un trait, il faut indiquer au navigateur la position de début en spécifiant l'abscisse et l'ordonnée. C'est grâce à la méthode moveTo. Comme ça, par exemple, je vais commencer à la position 10, 10, c'est-à-dire que je vais m'éloigner du coin haut à gauche de 10 pixels. Ensuite, à partir de cette position de début, on va étendre notre trait grâce à lineTo. Donc moveTo, c'est pour commencer le dessin, et lineTo, c'est pour dessiner votre trait. Dans ce cas, je mettrai la position par exemple 300 et 10, c'est-à-dire que ça sera horizontal. Et comme on l'a fait pour les arcs, il faut spécifier la méthode stroke. Bien sûr, on peut pas mettre fill, ça marchera pas parce qu'un trait n'a pas de remplissage, il a juste une bordure. C'est pourquoi on a mis stroke. Donc on a cette forme, voilà. Alors c'est comme ça qu'on dessine les traits. Bien sûr, si on veut dessiner un polygone comme par exemple un triangle, alors il suffit de tirer un autre trait à partir de la dernière position comme ça. Il suffit de copier cette instruction. Donc là par exemple, je mettrai 300 300, c'est-à-dire que je vais dessiner un trait vertical dans ce cas jusqu'à la position 300. Voilà, comme ça. Et maintenant je vais retourner à la position de début, c'est-à-dire 10, 10, et on a ceci. De la même manière, si vous voulez avoir un triangle plein, on va juste remplacer stroke par fill. Et c'est exactement de la même manière que l'on va dessiner les autres formes, c'est-à-dire que ce soit des pentagones ou bien des octogones, il suffit de tirer votre trait à partir de la dernière position et aller dans le sens que vous souhaitez. Et bien sûr, pour avoir une forme fermée, il faut toujours finir à la position de début. Là encore, c'est possible d'avoir aussi un contour. Alors en plus de fill, on mettra stroke. Alors on a un contour bleu et un fond orange. C'est bon, alors nous avons vu la méthode pour dessiner presque toutes les formes géométriques existantes, que ce soit des rectangles, des cercles, des polygones, des arcs ou des traits. Maintenant on va essayer de faire un exemple pratique, c'est une sorte d'arc qui tourne. Ça nous rappelle un petit peu l'icône du chargement de quelque chose. Ça veut dire si vous utilisez AJAX ou bien l'API Fetch et que vous attendez le chargement d'un objet du serveur, une généralement une icône loading accompagnée d'un cercle ou un arc qui tourne. On va essayer de faire la même chose. Alors au chargement de la page, on crée le contexte de dessin et on définit les couleurs de fond et de contour. Dans ce cas, on n'aura pas vraiment besoin de fond, alors on peut retirer cette instruction. Et pour l'épaisseur du contour, on va l'agrandir un petit peu, on mettra par exemple 6 pixels. Puisqu'on a une animation, alors forcément on aura besoin d'une fonction qui se rappelle dans des intervalles de temps réguliers. Moi je vais opter pour une fonction récursive. On va spécifier la valeur qui va changer, qui est dans ce cas l'angle. On va l'initialiser à 0. N'oubliez pas que c'est en radians. Ensuite on appelle notre fonction que j'appellerai animation. Maintenant je vais créer cette fonction animation. Et la récursive, alors je vais utiliser la méthode setTimeout. Il s'agit là d'une fonction qui se rappelle par elle-même chaque 20 millisecondes. Maintenant on va dessiner notre arc avec beginPath et closePath. Entre les deux, on va spécifier l'arc proprement dit. Le centre de l'arc correspond au centre de l'image. Le rayon, par exemple, on mettra 100 pixels, bien entendu. L'angle de début, ça sera angle qui est initialisé à 0, mais bien sûr qui changera au fil du temps. Et l'angle de fin, on mettra angle plus, par exemple, π. Puis on va spécifier qu'il s'agit d'un cercle creux, alors il n'y a pas de fond, à l'aide de la méthode stroke. Là, pour le nom de la fonction, j'ai oublié un a. Voilà, notre arc est créé, mais ça bouge pas, c'est normal parce qu'on n'a pas changé la valeur de angle. C'est ce que je vais faire à la fin. angle+= 0,1. N'oubliez pas que c'est une valeur en radians. Alors il faut pas incrémenter de 1 parce que sinon on va avoir un grand saut. Alors 0.1, je pense que c'est juste comme valeur. Voilà, vous avez constaté que ça marche au début, mais ensuite on a un cercle plein. Alors que l'idée, si vous regardez le code, vous savez bien que j'aurai toujours un demi-cercle, ou bien demi-arc si vous voulez, qui commence à la position angle et qui finit à la position angle+ π. Mais c'est normal d'avoir ce comportement Parce qu'en fait, une fois que vous dessinez quelque chose sur votre canevas, il va rester jusqu'à la fin. Alors si vous dessinez d'autres objets, les anciens objets vont subsister. L'idée, c'est de créer un calque de masquage, c'est-à-dire que l'on va créer une sorte de rectangle blanc qui va masquer l'ancien dessin. Et c'est ce qu'on va faire ici au début grâce à la méthode que nous avons vue la dernière fois, fillRect. Mais puisqu'ici j'aurais besoin d'un remplissage, donc il faut le spécifier là. La couleur de remplissage, ça sera du blanc. Voilà. Alors pour nous, le rectangle, il suffit qu'il cache cette partie. Mais nous, on va créer un rectangle qui a la même taille que le canevas. Ici, on mettra la position 0, largeur et la hauteur, c'est 600, 600. Bien sûr, j'ai défini ces valeurs statiquement, mais sinon, vous pouvez récupérer ça dynamiquement avec du JavaScript. Grâce aux attributs clientWidth ou bien offsetWidth. Alors exécutons. C'est bon, maintenant nous avons notre objet qui tourne. Sinon, on peut agrandir un petit peu notre arc. Je parle pas du rayon, mais juste l'étendue, c'est-à-dire la position de fin. Je vais lui ajouter quelque chose pour avoir presque un cercle, mais avec une petite ouverture. Je mettrai par exemple +1, bien sûr 1 radian. Ça va créer ça. Bon, je pense que c'est mieux. On peut améliorer ce résultat. Par exemple, on va ajouter un autre arc qui tourne dans le sens inverse au milieu. Alors je vais juste copier ce code. Ça c'est un autre arc. Je vais réduire son rayon, par exemple 80. Si je fais que 100, Je vais avoir ce résultat. C'est normal, ils sont synchronisés. Si je mets ici la valeur true, dans ce cas c'est comme si je crée un arc dans le sens antihoraire. Donc je vais avoir ce résultat, mais ils tournent toujours dans le même sens. Bon, si je veux qu'ils tournent dans des sens contraires, alors je vais juste changer le signe des angles. Par exemple, je mettrai moins angle. Ici par exemple, moins ang. Voilà, comme ça. En exécutant, ça donne ce résultat. Si je retire to, dans ce cas mon arc sera créé dans le sens horaire. Alors j'obtiens ce résultat. De la même façon, je peux ajouter d'autres arcs plus petits. Dans ce cas, je prendrai encore ce code et là je vais réduire, je mettrai 60 pour le rayon. Ça donne ça. Vous constatez que l'arc de l'extérieur et celui de l'intérieur sont synchronisés. Pour les décaler un peu, je vais juste jouer sur la valeur de l'angle, par exemple ici +1 et là, à la place de +1, je mettrai +2. On exécute. Voilà, ça donne ceci, etc. C'est-à-dire de la même façon que vous pouvez ajouter autant d'objets que vous souhaitez. J'espère que vous avez maintenant compris comment créer les objets de base ou bien les formes géométriques de base. Merci pour votre attention et à la vidéo prochaine.