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 dessiner dans la zone de dessin Canvas des rectangles voire des carrés.
Vous verrez que les positions et dimensions des formes peuvent être exprimées par rapport aux dimensions du canevas
La balise Canvas crée une zone de dessin (un "canevas") ; 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 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.
La règle de style relative à la balise CANVAS dans la feuille de style externe de mon site :
canvas{display : block ; margin : 10px auto; border : 1px solid black;}
La balise Canvas n'est pas nativement de type block d'où la règle "display: block" qui rend opérante l'autre règle : "margin : 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 ne supporte pas Canvas. Par exemple si vous utilisez encore IE8 ou une version antérieure. Tous les navigateurs récents ont implémenté l'API Canvas.
Comme toute boite HTML on peut styler la balise 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 référencer un élément du DOM j'utilise la méthode querySelector("#Id") qui remplace avantageusement "getElementByID.
On définit ensuite la couleur de remplissage avec la propriété fillStyle. Notez que la couleur est exprimée 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.
Le canevas est une grille (ou système de coordonnées) dont l'origine est située en haut à gauche. C'est donc exactement comme une zone de dessin SVG.
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.
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 objet qui cible le canevas et une autre qui cible le contexte de ce 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().
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. Attention, la méthode roundRect() est implémentée uniquement par Chrome pour l'instant !
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 : le camelCase.
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).