• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 20/11/2019

Utilisez la balise canvas

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

La balise canvas

Dans cette partie, nous allons étudier la balise canvas qui permet de dessiner dynamiquement (c'est-à-dire à l'aide de JavaScript) des formes et des images.

Canvas est ce qu'on appelle un conteneur pour des objets créés dynamiquement.

Quels sont ces objets ? Des courbes, des formes, des images, des animations. “Dynamiquement” signifie ici que ces éléments sont créés au moment de l'affichage de la page web par des instructions JavaScript.

L'utilisation de canvas offre plusieurs possibilités :

  • tracer des courbes, des formes ;

  • transformer des images ;

  • développer des animations interactives.

L’association de la balise canvas et de JavaScript constitue depuis quelques années déjà une vraie alternative au langage Flash qui a dominé le monde de l’animation web depuis la fin des années 90 jusqu’à récemment.

Exemple
Exemples

Commençons par un exemple simple qui va nous permettre de comprendre le principe de base de la balise canvas. Je vous propose de reproduire dans un fichier HTML le code affiché ici :

<!-- canvas -->
<canvas id="dessin" width="640" height="480">
Texte pour les navigateurs qui ne supportent pas canvas
</canvas>
<script>
var monCanvas = document.getElementById('dessin');
if (monCanvas.getContext{
var ctx = monCanvas.getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(0,0,200,50);
ctx.fillStyle = "blue";
ctx.fillStyle = "red";
ctx.fillRect(30,30,200,50);
} else {
alert('canvas non supporté par ce navigateur');
}
</script>

Voici les points clés de ce code :

d'abord :

  • la balise canvas avec l'identifiant id="dessin" qui nous permettra de la cibler par du code JavaScript, ainsi que des dimensions via les attributs width et height ; ces trois attributs sont obligatoires ;

ensuite :

  • le code JavaScript qui va créer des éléments à l'intérieur de canvas ;

dans ce code :

  • on crée une variable JavaScript  monCanvas  que l'on associe au canvas ;

  • à cette variable, par la méthode  getContext('2d'), on associe un objet HTML5 qui possède de nombreuses méthodes et propriétés de dessin ; on appelle cet objet le contexte de dessin (nous préciserons plus loin cette notion) ;

  • enfin, sur ce contexte, on utilise des méthodes de dessin, ici les méthodes  fillStyle  (choix d'une couleur de remplissage) et  fillRect  (dessin d'un rectangle).

Dernier point : il est conseillé d'effectuer un test JavaScript permettant de savoir si l'élément canvas est supporté par le navigateur. Ainsi, si la méthode  getContext  renvoie false, on affiche une alerte.

Une explication s'impose quant à la notion de contexte.

Le contexte définit la façon dont les objets vont être dessinés ; le contexte peut être vu comme un calque, représenté ici en bleu clair. Il s’étend au-delà du canvas, et son coin supérieur gauche se positionne par défaut en x=0 et y=0, c'est-à-dire dans le coin supérieur gauche du canvas représenté ici en gris. x est mesuré en pixels depuis la gauche vers la droite, y est mesuré en pixels depuis le haut vers le bas.

Contexte
Contexte et canvas

Il faut bien comprendre que les dimensions du contexte sont potentiellement infinies, tandis que la fenêtre d’observation de ce contexte a pour dimensions les attributs height et width de la balise canvas, définis au départ. Enfin, cette fenêtre d’observation est contrainte par la taille de l’écran :

<canvas id="dessin" width="640" height="480">

Tout se passe comme si les méthodes précédentes  fillStyle  et  fillRect  venaient dessiner dans ce calque.

Maintenant que nous avons compris le fonctionnement de base, nous allons introduire d'autres méthodes de dessin.

Dessin avec canvas

Nous avons étudié le fonctionnement de base de la balise canvas. À présent, nous allons introduire d'autres méthodes de dessin.

Dans l'exemple suivant, nous allons tracer un triangle, segment par segment :

Triangle
Triangle

Le code correspondant à ce dessin est le suivant :

<!-- Triangle segment par segment -->
<script>
var monCanvas = document.getElementById('dessin');
var ctx = monCanvas.getContext('2d');
/* couleurs de remplissage et de trait */
ctx.fillStyle = "yellowgreen";
ctx.strokeStyle = "steelblue";
ctx.lineWidth = 2;
/* début de tracé */
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70, 100);
ctx.lineTo(20,20);
ctx.closePath();
/* remplissage */
ctx.fill();
/* couleur de trait */
ctx.stroke();
</script>

Quelques explications sur ce code : une fois que le canvas est créé,

  • on définit grâce à la méthode  strokeStyle  la couleur qui va plus tard être utilisée pour un remplissage ;

  • on définit grâce à la méthode  lineWidth  l'épaisseur des traits à venir ;

  • on précise au canvas que l'on souhaite tracer un contour grâce à la méthode  beginPath ;

  • ensuite, grâce à la méthode  moveTo, on déplace l'origine d'un tracé dans le canvas (un peu comme si on déplaçait la pointe du crayon au-dessus de la feuille) ;

  • une série de  lineTo  permettent de tracer un trait depuis la dernière position de tracé jusqu'à un nouveau point ;

  • on ferme le tracé ;

  • enfin, on applique le remplissage et la taille des traits.

Je vous propose de reproduire cet exemple, puis, dans l'ordre et en testant à chaque fois, de changer la couleur de remplissage, la taille du trait, les coordonnées des points.

Enfin, si cela vous intéresse, vous trouverez sur Internet comment tracer des arcs (et donc des cercles) ou même des courbes de Bézier.

Dans l'exemple suivant, nous allons créer un dégradé linéaire dans un rectangle, et ce de façon très similaire au premier exemple présenté dans cette leçon ; sauf qu'ici l'argument de la méthode fillStyle sera un dégradé et non une couleur unique (cf ci-dessous).

Dégradé
Dégradé
<!-- Dégradé -->
<script>
var monCanvas = document.getElementById('dessin');
if (monCanvas.getContext{
var ctx = monCanvas.getContext('2d');
/* Dégradé linéaire et points*/
var lingrad = ctx.createLinearGradient(0,0,0,230);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(1, '#000000');
/* Association du dégradé au style du contexte */
ctx.fillStyle = lingrad;
/* Le rectangle qui va contenir le dégradé */
ctx.fillRect(30,30,200,50);
} else {
alert('canvas non supporté par ce navigateur');
}
</script>

Quelques explications sur ce code. Une fois que le canvas est créé :

  • on associe au contexte un gradient linéaire et on l'associe à la variable  lingrad ;  

  • ceci se fait grâce à la méthode  createLinearGradient  :

    • les arguments de cette méthode sont les coordonnées des points de début et de fin du dégradé : ici le point (0,0) et le point (0,150) ;

  • on ajoute trois couleurs grâce à la méthode  addColorStop, où le premier paramètre prend une valeur entre 0 et 1 définissant sa position dans le dégradé complet ;

  • ensuite, on utilise la méthode  fillStyle  que l'on avait utilisée tout à l'heure, mais cette fois avec pour argument la variable  lingrad ;

  • enfin, on crée le rectangle grâce à la méthode  fillRect

Je vous propose de reproduire cet exemple, puis dans l'ordre de changer le nombre de couleurs du dégradé et leur valeur.

En résumé

Nous venons de découvrir la balise canvas qui permet de dessiner dynamiquement des formes et des images et la notion de contexte associé à un canvas. Il est temps d’étudier quelles transformations peuvent être appliquées à ce contexte de dessin.

Je vous propose de voir cela dans le prochain chapitre.

Exemple de certificat de réussite
Exemple de certificat de réussite