Ces premiers paramètres définissent le style de la ligne à dessiner, désignée par
stroke avec Canvas (les coordonnées sont données juste après) : tout d'abord, son
épaisseur (lineWidth), puis sa couleur (strokeStyle, qui accepte aussi des
dégradés et des images).
Note > Dans la terminologie Graphics View, ces paramètres correspondent à ceux
d'un pinceau.
Ensuite, on peut définir les paramètres du remplissage (fill) de la forme qui sera
définie juste après : fillStyle en donne la couleur.
Note > Dans la terminologie Graphics View, ces paramètres correspondent à ceux
d'une brosse.
Voici le début du dessin proprement dit, avec beginPath pour la définition d'un
nouveau chemin. Le dessin et le remplissage s'effectueront avec ce chemin.
La première étape consiste à déplacer le pinceau quelque part dans la zone de
Canvas avec la méthode moveTo. Toutes les coordonnées sont limitées à cette zone.
(0, 0) correspond au coin en haut à gauche.
Le point courant (50, 50) est relié au suivant (350, 50) par une ligne droite avec la
méthode lineTo. On aurait pu utiliser un arc de cercle avec arcTo, une courbe
quadratique avec quadraticCurveTo et une courbe de Bézier avec
bezierCurveTo.
Une fois le chemin fini, il faut le fermer avec closePath : il devient alors
utilisable.
Par exemple, on peut remplir ce chemin à l'aide de la fonction fill. Le résultat
obtenu est montré à la Figure 23.2.
stroke sert à dessiner une ligne le long du chemin. La Figure 23.3 montre le
résultat obtenu (sans l'appel à fill de la ).
432