Comment animer les graphiques d’une zone de dessin (HTML)

Article
03/04/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

L’élément zone de dessin correspond à la zone d’un document HTML sur laquelle il est possible de générer des illustrations graphiques (animations, jeux...) en JavaScript. Cette rubrique explique la procédure à suivre pour animer un dessin élémentaire à l’aide de l’élément zone de dessin.

Prérequis

Cette rubrique part du principe que :

vous savez créer une application élémentaire du Windows Store en JavaScript qui utilise le modèle Bibliothèque Windows pour JavaScript ;
vous connaissez les bases des langages HTML et JavaScript.

Pour obtenir des instructions sur la création d’une application du Windows Store en JavaScript, voir Créer votre première application du Windows Store en JavaScript. Pour obtenir des instructions sur l’utilisation du modèle WinJS, voir Comment obtenir et utiliser le kit de ressources WinJS.

Instructions

Étape 1: Programmation de l’animation

À l’aide de la méthode requestAnimationFrame, vous commencez une animation en spécifiant une fonction à appeler (rappel) quand il est temps de mettre à jour votre animation pour le redessin suivant :

requestAnimationFrame(animationFunction);

requestAnimationFrame prend en compte la visibilité de la page et la fréquence d’actualisation de l’affichage pour déterminer le nombre d’images par seconde à allouer à l’animation (autrement dit, appel de animationFunction).

Notre exemple en JavaScript dessine un cercle animé qui se déplace avec un mouvement en spirale autour d’un cercle plus grand.

requestAnimationFrame(draw);

Voici notre animation (les résultats peuvent varier ; un matériel plus rapide génère des cercles plus rapprochés) :

Exemple de cercle en spirale dessiné par une animation sur une zone de dessin.

Étape 2: Dessin de l’image

Effacer la zone de dessin

Vous devez effacer le contenu de la zone de dessin avant de dessiner chaque image.

Il existe diverses méthodes pour effacer le contenu de la zone de dessin ou certaines parties d’une image. Vous pouvez par exemple supprimer certaines zones à l’aide de la propriété globalCompositOperation ou découper des chemins à l’aide de la méthode clip. La manière la plus simple d’effacer une zone de dessin consiste à utiliser la méthode clearRect.

Dans notre exemple, nous utilisons la méthode clearRect pour effacer tout le contenu de la zone de dessin. Mais pour mieux voir les effets du dessin de notre image, la méthode clearRect est commentée. Si cette ligne de code n’était pas commentée, vous verriez un seul cercle tournant en spirale autour d’une orbite circulaire plus grande et sa trace serait effacée avant que chaque image ne soit dessinée.
```
// The clearRect method clears the entire canvas.
context.clearRect(0, 0, 160, 160);
```
Enregistrer l’état de la zone de dessin

Lorsque vous dessinez l’image vous pouvez être amené à modifier certains des paramètres tels que les styles ou les transformations. Si vous souhaitez utiliser les paramètres d’origine chaque fois que vous redessinez l’image, vous pouvez utiliser la méthode save.

Les méthodes save et restore permettent d’enregistrer et de récupérer l’état de la zone de dessin dans une pile. L’état de la zone de dessin correspond à tous les styles et transformations qui ont été appliqués. Chaque fois que la méthode save est appelée, l’état actuel de la zone de dessin est enregistré dans la pile. La méthode restore renvoie le dernier état enregistré dans la pile.

Dans notre exemple, nous utilisons la méthode save juste avant de définir certaines transformations pour dessiner et déplacer le cercle animé.
```
// Save the canvas state.
context.save();
```
Dessiner l’image

Lorsque vous dessinez l’image sur la zone de dessin, vous pouvez utiliser deux transformations pour modifier votre image ; les méthodes Translater et Pivoter.

La méthode Translater permet de déplacer la zone de dessin et son origine vers un point différent de la grille de la zone de dessin :
```
translate(x, y)
```
Cette méthode prend deux arguments ; x indique de combien la zone de dessin est déplacée vers la gauche ou vers la droite, et y de combien elle est déplacée vers le haut ou vers le bas.

Il est conseillé d’enregistrer la zone de dessin avant d’effectuer des transformations car il est plus facile d’appeler la méthode restore que de faire une translation en sens inverse pour revenir à l’état d’origine de la zone de dessin. La méthode translate permet de placer l’image n’importe où sur la zone de dessin sans avoir à régler les coordonnées manuellement.

La méthode rotate permet de faire pivoter la zone de dessin autour de l’origine actuelle. Cette méthode n’a qu’un paramètre : l’angle de rotation de la zone de dessin, défini en radians.
```
rotate(angle)
```
La rotation s’effectue dans le sens des aiguilles d’une montre et son point central est toujours l’origine de la zone de dessin (l’angle supérieur gauche). Pour modifier le point central, vous devez déplacer la zone de dessin à l’aide de la méthode translate.

Dans notre exemple, nous allons alterner les appels des méthodes translate et rotate. Le premier appel de la méthode translate va centrer l’animation sur la zone de dessin.

Nous allons ensuite effectuer deux séries d’appels des méthodes rotate et translate. Les premiers appels des méthodes rotate et translate vont produire un petit cercle dessiné autour de la zone de dessin dans une grande boucle. La seconde série d’appels va produire un petit cercle dessiné dans une orbite beaucoup plus petite.

La taille de la zone de dessin est définie sur 160 pixels pour la hauteur et 160 pixels pour la largeur, nous définirons donc les coordonnées x et y de la méthode Translater sur 80 de manière à ce que notre animation globale soit centrée sur la zone de dessin.
```
// centers the image on the canvas             
context.translate(80, 80);
```
Nous commençons notre premier appel de la méthode rotate en utilisant l’objet date pour calculer le paramètre de la méthode rotate. Ce paramètre représente l’angle de rotation de la zone de dessin.
```
var time = new Date();
context.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
```
Notez que la valeur utilisée pour calculer l’élément getSeconds est 60 et que la valeur pour calculer l’élément get getMilliseconds est 60 000.

La méthode translate déplace la coordonnées, ce qui déplace le cercle en rotation autour de la zone de dessin en formant une grande orbite.
```
// Translate determines the size of the circle's orbit.
context.translate(50, 0);
```
Voici l’effet des premiers appels des méthodes rotate et translate :

Les deux appels suivants des méthodes rotate et translate créent une orbite plus petite de cercles formant une boucle.
```
// Rotate causes the circle to move in a small orbit.
context.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );

// Translate determines the size of the orbit.
context.translate(0, 5);
```
Notez que pour calculer l’angle lors du second appel de la méthode rotate, la valeur utilisée pour calculer l’élément getSeconds est 6 et la valeur pour calculer l’élément get getMilliseconds est 6 000.

Si les premiers appels des méthodes rotate et translate sont commentées, voici ce que dessine le second appel des méthodes rotate et translate :

Une fois le repositionnement défini, le cercle est dessiné sur la zone de dessin.
```
// This draws the repositioned circle
context.beginPath();
context.arc(5, 5, 4, 0, Math.PI*2, true); 
context.stroke();
```
Restaurer l’état de la zone de dessin

À l’étape b, nous avons enregistré l’état de la zone de dessin ; nous allons donc à présent rétablir l’état de la zone de dessin pour la prochaine image à dessiner.
```
// Restores the canvas to the previous state
context.restore();
```

Exemples complets

Graphique animé

Cet exemple en JavaScript dessine un cercle animé qui se déplace avec un mouvement en spirale autour d’un cercle plus grand.

window.onload = init;
  
// As an optimization, make "context" a global variable that is only set once.
var context;
  
function init(){
  context = document.getElementById('canvas').getContext('2d');    
  window.requestAnimationFrame(draw);
} // init

function draw() {
  // Save the canvas state.
  context.save();         
  
  // context.clearRect(0, 0, 160, 160);

  // centers the image on the canvas             
  context.translate(80, 80); 
  
  // Rotate moves the spiraling circle around the canvas in a large orbit.
  var time = new Date();
  context.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
  
  // Translate determines the location of the small circle.
  context.translate(50, 0);  
  
  // Rotate causes the circle to spiral as it circles around the canvas.
  context.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
  
  // determines the size of the loop
  context.translate(0, 5);  
  
  // This draws the circle
  context.beginPath();
  context.arc(5, 5, 4, 0, Math.PI*2, true); 
  context.stroke();
  
  // Restores the canvas to the previous state
  context.restore();
  window.requestAnimationFrame(draw);
}  // draw

Ceci est un exemple de feuilles de style en cascade (CSS) qui crée une bordure noire autour d’un élément de la zone de dessin.

/* style the canvas element with a black border. */
canvas { border: 1px solid black; }

Ce fichier HTML crée un élément de dessin et utilise des fichiers JavaScript et CSS externes.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="160" height="160" />
    </body>
</html>

Rubriques associées

Démarrage rapide : dessin sur une zone de dessin

Partager via