Animations

La gestion des animations avec Canvas est quasi inexistante ! En effet, Canvas ne propose rien pour animer les formes, les déplacer, les modifier… Pour arriver à créer une animation avec Canvas, il faut :

Dessiner une image ;
Effacer tout ;
Redessiner une image, légèrement modifiée ;
Effacer tout ;
Redessiner une image, légèrement modifiée ;
Et ainsi de suite…

En clair, il suffit d'appeler une fonction qui, toutes les x secondes, va redessiner le canvas. Il est également possible d'exécuter des fonctions à la demande de l'utilisateur, mais ça, c'est assez simple.

Une question de « framerate »

« Framerate » est un mot anglais pour évoquer le nombre d'images affichées par seconde. Les standards actuels définissent que chaque animation est censée, en théorie, afficher un framerate de 60 images par seconde pour paraître fluide pour l’œil humain. Parfois, ces 60 images peuvent ne pas être toutes affichées en une seconde à cause d'un manque de performances, on appelle cela une baisse de framerate et cela est généralement perçu par l'œil humain comme étant un ralenti saccadé. Ce problème est peu appréciable et est malheureusement trop fréquent avec les fonctions setTimeout() et setInterval(), qui n'ont pas été conçues à l'origine pour ce genre d'utilisations…

Une solution à ce problème a été développée : requestAnimationFrame(). À chacune de ses exécutions, cette fonction va déterminer à quel moment elle doit se redéclencher de manière à garder un framerate de 60 images par seconde. En clair, elle s'exécute de manière à afficher quelque chose de fluide.

Cette fonction étant relativement nouvelle, elle n'est pas implémentée en standard par tous les navigateurs. Cela dit, tous les navigateurs actuels l'implémentent sous un nom qui leur est propre. Voici un petit script qui définit une méthode window.requestAnimFrame() qui sera compatible avec tous les navigateurs. Si aucune implémentation n'est disponible, c'est setTimeout() qui est utilisée :

window.requestAnimFrame = (function(){

return window.requestAnimationFrame || // La forme standardisée

window.webkitRequestAnimationFrame || // Pour Chrome et Safari

window.mozRequestAnimationFrame || // Pour Firefox

window.oRequestAnimationFrame || // Pour Opera

window.msRequestAnimationFrame || // Pour Internet Explorer

function(callback){ // Pour les élèves du dernier rang

window.setTimeout(callback, 1000 / 60);

};

})();

Un exemple concret

Reprenons le canvas que nous venons de réaliser :

Le canvas que nous venons de réaliser

En nous basant sur son code, nous allons faire tourner le dessin dans le sens des aiguilles d'une montre. Pour commencer, il faut créer une fonction qui sera appelée par window.requestAnimationFrame(). Il s'agira de la fonction draw(angle). Cette fonction efface le canvas et le redessine avec un angle de rotation incrémenté de quelques degrés.

window.onload = function() {

var canvas = document.querySelector('#canvas');

var context = canvas.getContext('2d');

function draw(angle) {

context.save();

context.clearRect(0, 0, 150, 150);

context.translate(75,75);

context.fillStyle = "teal";

context.rotate((Math.PI / 180) * (45 + angle)); // ne pas oublier le décalage

context.fillRect(0, 0, 50, 50);

context.fillStyle = "orange";

context.rotate(Math.PI / 2);

context.fillRect(0, 0, 50, 50);

context.fillStyle = "teal";

context.rotate(Math.PI / 2);

context.fillRect(0, 0, 50, 50);

context.fillStyle = "orange";

context.rotate(Math.PI / 2);

context.fillRect(0, 0, 50, 50);

context.restore();

angle = angle + 2; // on augmente le décalage

if (angle >= 360) angle = 0; // on remet le décalage à 0, puisqu'on a fait le tour du cercle

window.requestAnimFrame(function() { draw(angle) });

}

draw(0); // premier appel

};

La variable angle représente le décalage. Lors du premier appel de draw(), le décalage vaut 0. Après le premier appel, on incrémente angle de 2 degrés, et donc, lors du prochain appel, tout le canvas sera dessiné avec un décalage de 2 degrés. On réincrémente de 2, et on redessine. Ainsi de suite, pour donner l'illusion que toute la forme bouge, alors qu'on ne fait que spécifier un angle de rotation de départ qui va croissant.

Les possibilités d'animation de Canvas sont toutes basées sur le même principe :window.requestAnimationFrame(). Ici, il s'agissait de créer un effet de rotation, mais il est possible de créer une courbe qui s'étire (une courbe de Bézier pour laquelle on incrémente les valeurs), d'animer une balle qui rebondit… Bref, les possibilités sont nombreuses, mais une fois que le principe est acquis, il est facile de se débrouiller.

Ce chapitre d'introduction à Canvas est désormais terminé. Toutes les ficelles de ce nouvel élément n'ont pas été vues, mais le principal est là. Il ne tient qu'à vous de vous exercer et d'approfondir votre connaissance de <canvas> !

En résumé

L'élément <canvas> est une zone de la page dans laquelle il est possible de dessiner des formes via le Javascript. Canvas supporte également un système basique pour créer des animations.
Le dessin se fait par l'intermédiaire de coordonnées dont l'origine des axes (le point (0,0)) est le coin supérieur gauche du canvas.
Une fois dessinée, une forme n'est plus manipulable. Il est nécessaire d'effacer le contenu du canvas, puis de redessiner.
Canvas ne supporte que quelques formes : le rectangle, l'arc de cercle, et les courbes de Bézier quadratiques et cubiques.
Il est également possible d'insérer des images au sein du canvas, tout comme de créer des dégradés ou d'ajouter du texte.
L'utilisation des rotations et des translations facilite les calculs des coordonnées et donc la création du dessin.

Si canvas vous intéresse, sachez qu'il existe des frameworks qui permettent de simplifier le dessin, et même d'ajouter des événements aux "formes". C'est le cas de KineticJS, expliqué dans ce tutoriel de bestmomo.

Créé avec HelpNDoc Personal Edition: Sites web iPhone faciles