Comment dessiner en Javascript avec la balise canvas (#1)

Dans ce billet sur la balise , nous verrons simplement comment dessiner des formes simples (ou plus complexes par combinaison) et en modifier la couleur. Ce billet s’inscrit dans une série où nous verrons d’autres possiblités du tag canvas.

La balise

Le tag est récent et fait son apparition dans HTML 5. Il n’est donc pas encore implémenté dans tous les navigateurs mais l’est dans Safari, Gecko (Mozilla Firefox utilise le moteur Gecko) et Opera. Nous verrons plus loin comment contourner ce problème.

Un canvas est un fait une surface de dessin de taille fixe ou on va pouvoir dessiner via quelques méthodes en Javascript. Voici un exemple d’utilisation du tag canvas :



Le tag de fermeture est obligatoire. De plus, par défaut, le canvas sera transparent et si la taille n’est pas renseignée, il fera 300 pixels de large et 150 pixels de haut.

Côté Javascript

Avant de commencer à dessiner sur le canvas, on doit récupérer un contexte. Comme il vaut mieux un code qu’un long discours, en voici un :

Je pense que le code est clair mis à part l’argument “2d” sur la méthode getContext(). Elle prend en argument le type de contexte que l’on veut obtenir. En réalité, 2d est le seul possible pour le moment mais probablement un contexte 3d verra le jour dans l’avenir. Toutes les méthodes de dessin seront appelées sur un contexte.

Les rectangles

C’est en fait la seule forme possible. Il existe trois méthodes pour le dessin de rectangle :

• fillRect(x, y, largeur, hauteur) : dessine un rectangle rempli
• strokeRect(x, y, largeur, hauteur) : dessine un rectangle vide
• clearRect(x, y, largeur, hauteur) : efface la zone renseignée

Pour chacune des méthodes, on passe en argument les coordonnées du coin supérieur gauche et les dimensions du rectangle. Rien de très compliqué mais si on en reste là, les possibilités sont minimes.

Dessiner d’autres formes via les paths

Heureusement pour nous, il y a plus que des rectangles. On peut faire toutes les formes que l’on désire grâce aux paths. Ce sont en fait des séries de lignes, arcs, … qui, au final, font une forme. Premièrement, on appelle la méthode beginPath() (toujours sur un contexte de notre canvas) pour commencer un nouveau path. Ensuite, on se déplace et on trace avec des méthodes que nous verrons plus loin (on peut comparer ça à un crayon qu’on déplacerait sur une feuille et avec lequel on tracerait des lignes ou des courbes). Enfin, il existe deux possibilités pour terminer notre dessin :

• fill() : remplir la forme
• stroke() : dessiner la forme sans la remplir (dessiner la bordure de celle-ci)

Déplacer le “crayon”

Grâce à la méthode moveTo(x, y), on déplace le “crayon” mais on ne trace en fait rien. A chaque appel de beginPath(), la position est remise à (0,0).

Tracer des lignes

C’est lineTo(x, y) qui s’en charge. Cette méthode trace un trait depuis la position courante (modifiable via moveTo(x,y)) jusqu’à la position (x, y) passée en argument. La nouvelle position courante est bien évidemment (x, y).

Les arcs

arcTo(x, y, rayon, angleDepart, angleFin, inverserLeSens) s’occupe de tracer des arcs. Un peut plus complexe que lineTo, en voici les différents arguments explicités :

• x, y : coordonnée du centre du cercle
• rayon : rayon du cercle en pixels
• angleDepart et angleFin : angles de départ et de fin de l’arc en radians (pensez à utiliser Math.PI)
• inverserLeSens : si true, on tourne dans le sens anti-chronologique

Les courbes de Bézier

Pour ceux qui ont déjà touché à un logiciel de dessin ou de modélisation 3D, ce nom doit leur dire quelque chose. Je vous invite à aller jeter un coup d’oeil sur la page courbe de Bézier de Wikipedia. Il en existe deux sortes, les courbes de Bézier cubiques et quadratiques. La première ayant un seul point de contrôle et l’autre deux. Voici les méthodes à appeler :

• quadraticCurveTo(pointDeControleX, pointDeControleY, x, y) : tracer la courbe quadratique depuis la position courante jusqu’à (x, y) dont le point de contrôle est en (pointDeControleX, pointDeContoleY)
• bezierCurveTo(pointDeControle1X, pointDeControle1Y, pointDeControle2X, pointDeControle2Y, x, y) : idem que la méthode précédente mais avec les deuxième point de contrôle (le premier point de contrôle pour la position courante et le deuxième pour la destination)

Fermer le path

closePath() trace une ligne entre la position courante et le premier point du path, ce qui permet de fermer la forme plus facilement.

Un peu de couleur

Pour régler la couleur de remplissage et/ou la couleur des traits avant l’appel d’un fill(), stroke(), fillRect() ou strokeRect(), rien de plus simple. Il suffit de modifier le paramètre fillStyle pour le remplissage ou strokeStyle pour les traits sur un contexte.

contexte.fillStyle = "rgba(255,127,90,0.6)";

Vous pouvez y mettre directement le nom de la couleur ou bien sous les formes #RRGGBB, rgb(R,G,B) ou rgba(R,G,B,A). On peut aussi modifier le paramètre globalAlpha d’un contexte pour gérer la transparence (de 0 à 1).

J’écrirai prochainement un deuxième billet sur l’insertion d’images, de motifs, la modification du style des lignes, les dégradés, …

Share This