• 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

Gérez les transformations, les textes et les images

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

Les transformations

Des transformations peuvent être appliquées au contexte de dessin. Parmi celles-ci, un changement d'échelle, une rotation, une translation :

  • scale(x,y)

  • rotate(angle)

  • translate(x,y)

Voyons cela de plus près !

Reprenons le code du premier exercice du chapitre précédent. Appliquons une rotation au contexte juste après qu'il ait été créé et avant même d'y dessiner les deux rectangles. 

<!-- 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');
// rotation
ctx.rotate(Math.PI / 8);
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>

Testons ce code ! Sans doute allez-vous obtenir la figure suivante :

Rotation de deux rectangles
Rotation de deux rectangles

Une explication s'impose. Nous avons vu que le contexte (représenté en bleu dans la figure ci-dessous) définit à chaque instant la façon dont les nouveaux objets vont être dessinés dans le canvas (représenté en gris).

Rotation du contexte
Rotation du contexte

Première remarque

Rappelons que le contexte se positionne par défaut en  x=0  et  y=0,  c'est-à-dire dans le coin supérieur gauche du canvas, et que x est mesuré en pixels depuis la gauche vers la droite, tandis que y est mesuré en pixels depuis le haut vers le bas.

L’intérêt : on peut déplacer ce contexte, le faire tourner et lui appliquer un changement d'échelle.

Ainsi, à chaque changement du contexte, c'est comme si on ajoutait une feuille de calque sur un dessin existant.

Deuxième remarque

Les objets dessinés par le contexte peuvent se retrouver hors du cadre défini par le canvas. Dans notre exemple, le contexte est positionné dans le coin supérieur gauche du canvas.

Rotation de deux rectangles
Dessin tronqué par une rotation qui fait sortir un objet hors du canvas

Le fait que le rectangle rouge soit tronqué par cette rotation ne nous surprend donc pas.

Troisième remarque

Si l'on veut à présent que le rectangle rouge apparaisse en totalité, il faut, avant la rotation — et toujours avant de dessiner quoi que ce soit — appliquer au contexte une translation, par exemple selon l'axe x. Ceci produit le second cadre orienté vers le bas. Vous pouvez aussi essayer d'appliquer d’abord une rotation puis une translation au contexte, avant d’y dessiner le rectangle ; cela donnera la même figure suivante :

Rotation puis translation du contexte
Rotation puis translation du contexte

Voici le code correspondant à la figure ci-dessus :

<!-- 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');
// rotation
ctx.rotate(Math.PI / 8);
ctx.translate(0,50);
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>

Quatrième remarque

Si on veut qu'un objet, par exemple un rectanglesoit dessiné avec une rotation non plus autour de son coin supérieur gauche comme c'est le cas dans l'exemple présenté ici, mais autour de son centre, il faut le dessiner dans le contexte de telle façon que ce centre coïncide avec le coin supérieur gauche du contexte, comme sur la figure.

Le centre coïncide avec le coin supérieur gauche du contexte
Le centre coïncide avec le coin supérieur gauche du contexte

Exercice :

Pour bien comprendre ce concept de changement de contexte, je vous propose de le mettre en œuvre en dessinant deux rectangles. Le premier sans rotation, le second avec rotation comme sur la figure ci-dessous :

Rotation d'un rectangle
Rotation d'un rectangle

Le code correspondant est le suivant :

<!--Deux rectangles avec rotation du contexte-->
<script>
var monCanvas2 = document.getElementById('dessin2');
if (monCanvas2.getContext){
var ctx2 = monCanvas2.getContext('2d');
/* premier rectangle dans le contexte par défaut */
ctx2.fillStyle = "red";
ctx2.fillRect(0, 0, 200, 50);
/* rotation du contexte */
ctx2.rotate(Math.PI / 8);
/* second rectangle dans le contexte modifié */
ctx2.fillStyle = "blue";
ctx2.fillRect(30, 30, 200, 50);
} else {
alert('canvas non supporté par ce navigateur');
}
</script>

Les transformations de contexte sont importantes. Nous aurons l’occasion d’y revenir.

Pour terminer cette introduction à la balise canvas, voyons comment y intégrer des textes et des images.

Le texte

Dans ce premier exercice, je vous propose de créer des éléments textuels à l'intérieur d'un contexte à partir de ce code :

<script>
var monCanvas = document.getElementById('dessin');
if (monCanvas.getContext){
var ctx = monCanvas.getContext('2d');
ctx.fillStyle = '#00F';
ctx.font = 'Italic 30px Sans-Serif';
ctx.textBaseline = 'top';
/* texte plein */
ctx.fillText ('Hello!', 40, 50);
ctx.font = 'Bold 30px Sans-Serif';
/* contour de texte */
ctx.strokeText('Hello!', 40, 150);
} else {
alert('canvas non supporté par ce navigateur');
}
</script>

Qui donnera le résultat suivant :

Exemple de texte
Exemple de texte

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

  • on associe au contexte un style de remplissage a priori, grâce à la méthode  fillStyle ;

  • on associe au contexte les fontes à utiliser grâce à la méthode font ;

  • on précise comment le texte est aligné verticalement à l'intérieur de l'espace prévu grâce à l’attribut  textBaseline  ;

  • enfin, on crée deux textes :

    • le premier grâce à méthode  fillText  dont les arguments sont la chaîne de caractères à afficher et la position du coin supérieur gauche du cadre contenant ce texte,

      Position du texte par rapport au canvas
      Position du texte par rapport au canvas
    • le second grâce à la méthode  strokeText  qui produit juste un contour des lettres.

Je vous propose de reproduire cet exemple, puis, dans l'ordre, de changer l'argument de baseLine, la localisation des textes et les chaînes à afficher.

Les images

Dans ce dernier exercice, je vous propose d'importer une image à l'intérieur d'un contexte. Voici le code sur lequel nous allons travailler :

<script>
monCanvas = document.getElementById('dessin');
if (monCanvas.getContext){
ctx = monCanvas.getContext('2d');
/* nouvelle image */
sun = new Image();
/* définition de la source */
sun.src = 'images/sun.png';
/* tracé uniquement quand l'image sera chargée
(quand l'événement onLoad sera déclenché, exécuter ctx.drawImage() */
sun.onload = function(){
ctx.drawImage(sun, 0, 0);
}
} else {
alert('canvas non supporté par ce navigateur');
}
</script>

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

  • on définit un nouvel objet image, objet auquel sont associés des méthodes et des attributs que l'on va découvrir ;

  • ensuite, comme on doit charger une image, on veut être sûr qu'elle est bien présente au moment de l'afficher ; pour ce faire :

    • on se sert de l'attribut  onload : ainsi, lorsque l'image sera chargée, on l'associera au contexte grâce à la méthodedrawImage, dont les arguments sont l'objet image précédent et la position du coin supérieur gauche de l'image dans le contexte ;

  • la méthode drawImage possède d'autres arguments optionnels, comme la largeur et la hauteur de l'image.

Je vous propose de reproduire cet exemple, puis, avant affichage, de modifier le contexte en lui appliquant une rotation, par exemple.

En résumé

Dans ce deuxième chapitre, nous avons donc vu comment transformer un canvas et y introduire du texte et des images. Dans le chapitre suivant, nous allons découvrir comment créer l'illusion du mouvement, en faisant évoluer ce canvas dans le temps.

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