Traduction
Tutoriel Canvas - sommaire
Tutoriel Canvas - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dans ce chapitre je vais vous montrer comment définir un ou plusieurs éléments Canvas dans une même page web et comment
dessiner dans ces différentes "toiles".
Définir la ou les toiles, c'est le travail de HTML5.
Dessiner dans chaque toile, c'est le travail d'un script JS reposant sur les méthodes de l'API Canvas.
La balise Canvas crée une zone de dessin (un "toile") ; les coordonnées sont définies par un système cartésien qui débute
dans le coin supérieur gauche de la zone.
La balise Canvas doit comporter les attributs "width & height". S'ils sont absents la zone de dessin fait par défaut 300 pixels par 150.
La balise canvas peut bien sûr avoir aussi l'attribut style comme n'importe quel élément HTML.
Notez que le premier canevas a un "background" gris et des coins arrondis.
Que le deuxième canevas est borduré et ombré et que le troisième canevas a pour arrière plan un dégradé linéaire.
Il se peut qu'aucune forme ne se dessine dans le troisième canevas car j'utilise une nouvelle méthode
de l'API Canvas qui n'est pas forcément implémentée par le navigateur que vous utilisez.
Tout ce code appelle à quelques commentaires.
La balise Canvas n'est pas nativement de type block d'où la règle "display: block" qui rend opérante la règle suivante : "margin : 10px auto".
Pour chaque balise CANVAS on précise la taille du canevas sans préciser l'unité (ce sont forcément des pixels) sous forme d'attributs
width & height.
La balise canvas fermante est obligatoire. Entre la balise ouvrante et fermante on peut insérer un texte alternatif qui s'affiche
si le navigateur ignore l'élément HTML. Par exemple si vous utilisez
encore IE8 ou une version antérieure.
Tous les navigateurs récents ont désormais implémenté l'API Canvas donc je n'écris rien entre les balises début et fin.
Comme toute boite HTML on peut styler l'élément CANVAS avec les propriétés background, border-radius, border, box-shadow, etc.
L'arrière-plan peut être une couleur unie ou un dégradé voire une image.
Le script comprend trois parties : une pour chaque canevas.
Si ce script est interne à la page il doit être bien sûr, contenu dans la balise SCRIPT !
Pour cibler dans le script un élément du DOM j'utilise la méthode querySelector("#Id") qui remplace avantageusement getElementByID(id).
L'API Canvas n'autorise que le dessin 2D d'où la méthode getContext('2d') qui retourne un objet graphique de type 2d.
On définit ensuite la couleur de remplissage avec la propriété fillStyle. Notez que la couleur est exprimée ici avec la notation RGBA (voir tutoriel CSS3) c'est à dire avec quatre paramètres. Le dernier paramètre correspond au degré de transparence.
Puis on appelle 9 fois la méthode fillRect(x ,y ,largeur ,hauteur) pour dessiner 9 rectangles pleins.
Les paramètres x & y correspondent aux coordonnés du coin haut gauche du rectangle.
Ici neuf carrés qui ont tous les mêmes dimensions (100 par 100) mais le coin haut gauche du carré toujours plus éloigné de l'origine ; à chaque les
cordonnées x / y sont incrémentées de 20.
Il y a donc empilement et décalage des différentes formes.
Plutôt que 9 instructions pour dessiner le contour des neuf carré ; une seule instruction mais dans une boucle répétée 9 fois !
On peut avoir plusieurs canevas dans une même page mais alors faites attention dans le script.
Pour chaque canevas il faut une variable qui cible le canevas et une autre qui cible le contexte dudit canevas.
Donc ici j'utilise pour le premier canevas les variables canevas & contexte tandis que pour le deuxième canevas j'utilise canevas2 & contexte2.
Nous verrons qu'il existe une autre solution plus orthodoxe : inclure le code relatif à chaque canevas dans une fonction. On peut donc utiliser les mêmes termes pour designer les variables puisqu'elles sont locales.
Dans ce deuxième canevas on veut colorier uniquement le contour ("stroke") des formes.
Il faut définir une opacité, la couleur et une épaisseur de contour respectivement avec les propriétés globalAlpha(), strokeStyle(), lineWidth().
Puis une boucle est exécutée 9 fois. Lors de chaque passage dans la boucle il y a un changement d'origine avec la méthode translate(offset x, offset y) ; ensuite on dessine et colorie le contour du rectangle avec la méthode strokeRect().
Pour ce troisième canevas, le contexte 2D est désigné par la variable ctx comme il est souvent d'usage ...
Notez l'emploi d'un dégradé linéaire en guise d'arrière plan de l'élément HTML canvas.
Dans la méthode roundRect() le cinquième argument (le radius) doit être entre crochets.
La dernière version de Canvas a introduit entre autres la méthode roundRect() qui permet de dessiner des rectangles et carrés avec des angles arrondis voire des ronds.
Dans les exemples précédents nous avons utilisé différentes méthodes. Voyons leur syntaxe.
Attention à la casse dans l'écriture des propriétés et méthodes ; respectez la règle JavaScript concernant la casse :
la première lettre de chaque mot en majuscule mais seulement à partir du deuxième mot : notation camelCase.
Les arguments passés peuvent être des variables !
Pour exprimer les couleurs on peut utiliser un nom (anglais bien sûr) ou un code hexadécimal ou le code RGB ou encore RGBA (pour gérer en même temps la transparence).