Un tracé va être représenté par un point d’origine, une suite de points intermédiaire et un point d’arrivée. Des segments vont ensuite être tracés pour relier les différents points entre eux pour former des figures plus complexes.
On va donc devoir suivre les étapes suivantes pour créer des figures complexes :
- Définition d’un tracé (points d’origine, intermédiaires et d’arrivée) ;
- Choix de la forme (courbé, droit, etc.) et de la couleur de chaque segment ;
- Remplissage de l’espace entre les segments ou définition des contours ;
- Fermeture du tracé.
Dessiner une ligne
Pour démarrer un tracé, on va déjà utiliser la méthode beginPath(). Cette méthode ne prend pas d’argument et sert simplement à signaler qu’on démarre un tracé.
Chaque tracé va posséder ses propres styles (couleur, épaisseur, forme) mais on ne va pouvoir appliquer qu’un style à chaque tracé. En d’autres mots, il faudra créer un nouveau tracé à chaque fois qu’on souhaite changer de style.
Pour définir une ligne, nous allons utiliser la méthode lineTo(). Cette méthode prend en arguments une paire de coordonnées qui indiquent le point final de la ligne.
Le point de départ de la ligne va dépendre du tracé précédent (par défaut, la fin d’un tracé correspond au début du tracé suivant dans un canevas). On va également pouvoir définir un point de départ pour notre ligne grâce à la méthode moveTo().
La méthode moveTo() permet de définir un point à partir duquel faire quelque chose. Cette méthode prend une paire de coordonnées en arguments qui correspondent à la distance par rapport aux bords gauche et haut du canevas.
Pour dessiner la ligne en soi (pour qu’elle soit visible), on utilisera la méthode stroke() qui permet d’appliquer les styles définis avec strokeStyle à notre ligne.
Notez qu’on va également pouvoir choisir l’épaisseur de notre ligne en passant une valeur (sans unité) à la propriété lineWidth.
See the Pen
Cours JavaScript 15.3.1 by Pierre (@pierregiraud)
on CodePen.
Dessiner des figures en utilisant plusieurs lignes à la suite
On va pouvoir dessiner toutes sortes de figures en dessinant plusieurs lignes à la suite dans le canevas. L’une des figures les plus simples à créer est le triangle.
Pour dessiner plusieurs lignes à la suite, il suffit d’utiliser plusieurs fois lineTo() : les coordonnées du point défini par la première méthode lineTo() serviront de point de départ pour la ligne tracé par le deuxième appel à la méthode lineTo() et etc.
Pour ne dessiner que les contours du triangle et ne pas remplir l’intérieur, on va à nouveau utiliser la méthode stroke(). Pour remplir notre triangle, on utilisera plutôt la méthode fill() qui va appliquer les styles définis avec fillStyle à notre figure.
A noter : lorsqu’on définit plusieurs tracés dans un canevas, il est essentiel de fermer un tracé avec la méthode closePath() avant d’en définir un autre afin que ceux-ci s’affichent bien. La méthode closePath() permet en fait le retour du stylo au point de départ du sous-traçé courant, en ajoutant si nécessaire une ligne droite entre le point courant et le point rejoint.
Un appel à la méthode fill() ferme automatiquement le tracé (c’est la raison pour laquelle on l’appelle en dernier) et donc closePath() n’a aucun effet et n’est pas nécessaire. Cependant, si on utilise stroke(), le tracé n’est pas fermé et il faut donc absolument utiliser closePath().
See the Pen
Cours JavaScript 15.3.2 by Pierre (@pierregiraud)
on CodePen.
Bien évidemment, on va de cette manière pouvoir créer de la même façon toutes sortes de figures géométriques en ajoutant autant de lineTo() qu’on le souhaite.
Dessiner plusieurs lignes avec des arrivées et origines différentes
Notez que pour créer plusieurs lignes indépendantes, il suffit d’utiliser moveTo() pour définir de nouvelles coordonnées de départ pour chaque nouvelle ligne.
See the Pen
Cours JavaScript 15.3.3 by Pierre (@pierregiraud)
on CodePen.
Dessiner des arcs de cercle
Pour dessiner des arcs de cercle, on va pouvoir utiliser l’une des deux méthodes arc() ou arcTo().
La méthode arc() prend six arguments :
- Un nombre correspondant au décalage du point central de l’arc de cercle par rapport au bord gauche du canvas ;
- Un nombre correspondant au décalage du point central de l’arc de cercle par rapport au bord supérieur du canvas ;
- Un nombre correspondant à la taille du rayon ;
- L’angle de départ, exprimé en radians ;
- L’angle de fin, exprimé en radians ;
- Un booléen (facultatif) qui indique si l’arc de cercle doit être dessiné dans le sens des aiguilles d’une montre (
false, valeur par défaut) ou dans le sens inverse (true).
Pour rappel, un tour de cercle complet = 360deg = 2PI radian. Pour convertir facilement les degrés en radians, vous pouvez retenir l’équation suivante : radians = PI*deg / 180. Pour obtenir la valeur de PI, on peut utiliser Math.PI.
De la même façon que précédemment, on va pouvoir dessiner des arcs de cercle vides ou pleins en utilisant stroke() ou fill().
See the Pen
Cours JavaScript 15.3.4 by Pierre (@pierregiraud)
on CodePen.
La méthode arcTo() va elle se servir de tangentes pour dessiner des arcs de cercle. On va devoir lui passer 5 arguments : une paire de coordonnées définissant l’emplacement du premier point de contrôle, une autre paire de coordonnées définissant l’emplacement du deuxième point de contrôle et le rayon du cercle.
Note : La tangente à une courbe est une droite qui touche cette courbe en un seul point, sans jamais la croiser. La première tangente va être tracée grâce au point de départ et au premier point de contrôle tandis que la seconde tangente va être tracée grâce au premier et au deuxième point de contrôle.
En fond, ArcTo() va tracer deux segments qui vont être utilisés comme tangentes pour tracer notre arc de cercle : un premier segment entre le point de départ du tracé et le premier point de contrôle et un deuxième segmente entre le premier point de contrôle et le deuxième point de contrôle.
See the Pen
Cours JavaScript 15.3.5 by Pierre (@pierregiraud)
on CodePen.
Notez que si on indique une taille de rayon aberrante, c’est-à-dire une taille trop grande pour que l’arc puisse tenir entre les points indiqués, on obtiendra des comportements inattendus avec un arc qui risque de ne pas apparaitre à l’endroit attendu.
Dessiner avec les courbes de Bézier
Les courbes de Bézier sont des courbes définies à partir d’un certain nombre de points. La théorie mathématique derrière la création de ces courbes est relativement complexe et dépasse le cadre de ce cours, je ne l’expliquerai donc pas ici.
Sachez simplement que si un jour vous avez besoin de les utiliser, vous disposez des méthodes bezierCurveTo() et quadraticCurveTo().
La méthode bezierCurveTo() prend 6 arguments : une première paire de coordonnées indiquant l’emplacement d’un premier point de contrôle, une deuxième paire de coordonnées indiquant l’emplacement d’un deuxième point de contrôle et une troisième paire de coordonnées indiquant l’emplacement du point d’arrivée.
La méthode quadraticCurveTo() n’utilise qu’un point de contrôle et ne va donc avoir besoin que de 4 arguments.
Ces points de contrôle vont servir à déterminer un certain arc en traçant de multiples tangentes entre le point de départ et d’arrivée.
