Accueil

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

Canvas : dessiner des rectangles

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

Coordonnées

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.

Les trois canevas de la page

Premier canevas

Deuxième canevas

Troisième canevas

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.

Le code HTML (et CSS en ligne) correspondant

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 code JavaScript de la page

Le script comprend trois parties : une pour chaque canevas.

Script pour remplir le premier 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.

Script pour remplir deuxième canevas

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().

Script pour remplir le troisième canevas

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 !

Syntaxe

Méthodes et propriétés de l'API Canvas

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.

La notation des couleurs

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).