API Canvas - Contexte de dessin, contours et fonds

Bonjour à tous et bienvenue dans cette nouvelle leçon qui porte sur l'API Canvas. Dans cette vidéo, nous allons voir comment dessiner les formes de base à l'aide du JavaScript. Donc, nous allons apprendre comment créer l'espace de travail, comment définir le contexte de rendu ou contexte de dessin et comment spécifier le remplissage et le contour des objets à intégrer. Nous allons ensuite dessiner notre première forme basique et essayer d'en faire quelque chose d'utile. La première opération consiste à déclarer la balise canvas. On peut également spécifier la largeur et la hauteur en HTML. N'oubliez pas que la balise canvas est vue par le navigateur comme étant une image. Dans ce cas, cette image aura des dimensions 800 sur 600 pixels. Bien entendu, on peut spécifier ses dimensions avec du CSS. Cependant, il y a un petit problème qui surgit si on procède de la sorte. Il est lié à la mise à l'échelle du rendu obtenu. Si on exécute sur navigateur, il n'y a rien de visible et c'est normal parce que par défaut l'image générée est transparente. On va quand même lui appliquer une bordure avec du CSS pour la distinguer. Maintenant notre image ressemble à ceci. Maintenant on va intégrer notre code JavaScript. Au chargement de la page, on commence par déclarer ce que l'on appelle le contexte de rendu de la manière suivante. On récupère l'objet canvas et on lui applique la méthode getContext. La méthode getContext permet de spécifier le rendu de dessin. Dans ce cas, on va lui passer un argument en guise de chaîne de caractères. Je vais opter pour 2D, c'est-à-dire que le rendu final va être une image plane ou bien une image à 2 dimensions. Cependant, on peut spécifier d'autres arguments comme par exemple WebGL que j'ai évoqué lors de la première vidéo, WebGL permet de spécifier un contexte 3D. Mais pour aller doucement, vaut mieux commencer par un contexte 2D qui est le plus simple. On va enregistrer ce contexte dans une variable du nom de contexte, comme ça. Désormais et pour le reste du code, c'est cet objet que l'on va manipuler. Notez que l'on va commencer par intégrer les formes de base comme les rectangles, les traits, les cercles, etc. Et comme vous le savez, ces formes, elles ont un contour et un fond. Alors il faut spécifier les couleurs respectives de ces 2 propriétés. On commence par la couleur de fond que l'on spécifie de cette manière: context.fillStyle et comme valeur, on va spécifier la couleur avec l'une des méthodes qu'on a vu en CSS. On sait qu'il y a 4 manières de faire, soit le nom anglais de la couleur, le codage hexadécimal ou bien le codage décimal, voire même le codage décimal avec la prise en charge de la transparence. Dans ce cas, je vais spécifier par exemple du noir en hexadécimal. Et pour la bordure ou bien le contour, c'est la propriété strokeStyle. Là par exemple, comme valeur, je vais spécifier en RGBA, par exemple du rouge un peu transparent. N'oubliez pas qu'il faut spécifier ces valeurs en tant que chaîne de caractères. Et si jamais votre objet est creux, c'est-à-dire qu'il dispose uniquement d'un contour, alors ce dernier aura une épaisseur qu'il faut spécifier avec cette propriété. C'est lineWidth. On mettra par exemple la valeur 2 pour dire 2 pixels d'épaisseur. C'est bon, nous avons spécifié les propriétés des objets que l'on va intégrer désormais. Maintenant, on va dessiner notre premier objet qui est le rectangle. Si on veut dessiner un rectangle plein, alors on procède de la sorte. C'est fillRect pour dire un rectangle plein. Et on va spécifier 4 propriétés, à savoir les coordonnées du coin haut à gauche, la largeur et la hauteur. Notez que le système de coordonnées est le même que le langage CSS, c'est-à-dire que ça commence par rapport au point haut à gauche de l'objet. On mettra par exemple 10. 10 pour dire un petit peu vers le coin haut à gauche de l'espace de travail qui est notre balise canvas dans ce cas. Pour la largeur du rectangle on mettra par exemple 100 pixels et pour la hauteur on mettra 200. Alors exécutons. Notre rectangle ressemble à ceci. Vous avez vu qu'il est noir parce qu'il est plein. On a bien spécifié la couleur de remplissage en tant que couleur noire. Et si on veut dessiner un rectangle creux, il suffit de remplacer fill par stroke. Et ça donne ceci. Dans ce cas, la couleur a changé parce qu'on a spécifié que la bordure doit avoir une couleur rouge avec un peu de transparence. Maintenant, imaginez que je veux dessiner un autre rectangle mais avec une couleur différente. Bon, si je fais ça, dans la position de début, je mettrai par exemple 200. 200 et je mettrai juste 50 pour la largeur et 50 pour la hauteur aussi. Alors regardons ce qui va se passer. Nous constatons que la couleur de la bordure est la même et c'est normal parce qu'on l'a spécifiée une seule fois et ça va s'étendre jusqu'à la fin du code. Alors si jamais vous voulez changer de couleur, alors il faut redéfinir la propriété. Dans ce cas, je prendrai cette ligne, je vais la copier juste avant la déclaration de mon nouveau rectangle. Et là je change de couleur. Par exemple je mettrai ici blue. Exécutons. Maintenant la bordure change. Et c'est pareil pour le remplissage. C'est-à-dire si vous voulez changer de couleur de fond, il suffit de redéfinir la propriété fill-style. Avant de passer à l'étape suivante, essayons de définir les dimensions de la balise canvas avec du CSS. Ce sont les mêmes dimensions que j'ai spécifiées avec du HTML. Dans ce cas, on va retirer ces propriétés, ou bien ces attributs. Réexécutons. On constate comme si l'image a été zoomée. D'ailleurs, on peut même constater qu'il y a un peu de flou, c'est-à-dire c'est pas trop net. Et ça, c'est un défaut. C'est pourquoi je vous ai dit qu'il est préférable de spécifier les dimensions avec du HTML plutôt qu'avec du CSS. On va retirer ça. Maintenant c'est mieux comme ça. En guise d'exemple pratique, nous allons essayer de dessiner un échiquier ou un damier si vous voulez. Alors on va retirer tout ce code. On va conserver seulement la couleur de remplissage, on n'a pas besoin de contour dans ce cas, et la couleur bien évidemment ça sera du noir. Il faut aussi redimensionner notre échiquier, on va le mettre à 600 parce que ça a une forme carrée, ce qui est évident. On sait qu'un échiquier n'est rien d'autre qu'une succession de rectangles noirs et blancs qui s'alternent. Nous on va dessiner juste les rectangles noirs parce que par défaut notre image est transparente et ça va laisser du blanc dans les zones qui n'ont pas été dessinées. Alors pas la peine de rajouter du code pour dessiner du blanc. Donc la première opération consiste à récupérer la largeur de notre objet, c'est-à-dire de l'échiquier, qui n'est rien d'autre que 600 pixels. Mais on va le faire de manière dynamique avec du JavaScript. Je vais nommer cette largeur w. On utilise l'attribut clientWidth qu'on a déjà vu en JavaScript. Pour la hauteur, pas la peine parce qu'on sait que l'objet est carré. Dans ce cas, la largeur et la hauteur auront la même valeur. On commence déjà par intégrer notre première case qui est noire dans ce cas. Alors je mettrai context.fillRect. La position de début sera à 0. Donc là, c'est les coordonnées du premier point. La largeur sera w divisé par 8 parce qu'on sait qu'un damier ou bien échiquier contient 8 cases à l'horizontale et 8 cases à la verticale. Alors la largeur de chaque case sera la largeur totale divisée par 8. Même chose pour la hauteur. N'oublie pas que la largeur et la hauteur, ils ont la même valeur, c'est pourquoi j'ai conservé le w. Alors exécutons. Donc on a la première case qui est intégrée comme ça. Pour la suite du traitement, il suffit d'appliquer des itérations, bien une boucle. Alors on va intégrer 2 boucles imbriquées, une qui va s'intéresser aux lignes et l'autre qui va s'intéresser aux colonnes. Là, c'est la grande boucle qui va s'intéresser aux lignes, qui va s'exécuter 8 fois. Et pour la petite boucle, même chose, ça va s'exécuter 8 fois. Si on fait que ça, rien ne va changer parce qu'on aura toutes les cases qui vont se superposer. Maintenant, on va les éparpiller convenablement dans l'espace de travail. Alors il suffit de jouer sur les coordonnées de début parce que la largeur sera toujours la même ainsi que la hauteur. La position de début, ça va dépendre de la largeur de la case. Alors mettre AW divisé par 8 et qu'on va multiplier par J. Dans ce cas-ci, J vaut 0, alors la position initiale c'est 0. Si J vaut 1, donc la prochaine position c'est AW sur 8. Si J vaut 2, la prochaine position ce sera 2 AW sur 8, etc. Et pour le Y, ça sera la même chose, mais dans ce cas on va multiplier par i parce qu'il faut conserver le même Y sur toute la ligne, et la ligne elle est assurée par la boucle i. Alors exécutons déjà pour voir ce que ça va donner. On obtient ceci, c'est normal, c'est-à-dire qu'on a une succession de rectangles noirs qui sont collés l'une à l'autre, et du coup ça couvre tout l'espace de cette manière. Maintenant on va créer les espaces blancs, c'est-à-dire que l'on va alterner les cases noires et blanches. À l'horizontale qu'à la verticale. Alors on va commencer par changer le pas d'incrémentation de la boucle j. On va incrémenter de 2, comme ça on va laisser place au rectangle blanc. Exécutons. Ça donne ceci. On s'approche un petit peu sauf que pour la première ligne c'est vrai, donc ça va rester tel qu'il est, mais pour la deuxième ligne ça va se décaler vers la droite. Alors pour assurer ce décalage, il suffit de regarder la valeur de i. Si i est pair, c'est-à-dire si ça vaut la valeur 0, 2, 4, etc., on va conserver cette position. Et si c'est impair, dans ce cas on va pousser vers la droite avec un offset qui vaut w/8. Alors c'est très simple, il suffit de corriger cette valeur comme ça. Alors on va ajouter à j i modulo 2. Dans ce cas, si i est pair, c'est comme si on multiplie par j, et si i est impair, alors c'est comme si on multiplie par j+ 1, ce qui va créer la décalage souhaité. Réexécutons. Et voilà, nous avons obtenu notre échiquier. J'espère que vous avez compris comment appréhender l'API Canvas avec du JavaScript, et notez que pour le reste des formes, le traitement est pratiquement le même avec quelques petits changements pour se conformer avec la particularité des objets que l'on veut intégrer comme des cercles ou bien des traits. On se contente de ça pour cette séance. Merci pour votre attention et à la vidéo prochaine.