Tutoriel Canvas - sommaire

Canvas : animations basiques

Le principe d'une animation Canvas est simple : appeler à intervalles réguliers une fonction d'animation via une instruction basée sur la fonction setInterval().

Cette fonction d'animation :
• vide le plus souvent la zone de dessin : emploi de clearRect()
• calcule les nouveaux paramètres de position et de dimensionnement des formes
• dessine les formes avec les nouveaux paramètres

Première animation

Le cercle a un rayon de plus en plus grand puis diminue et le cycle recommence.

Le code correspondant

Code HTML : <canvas width = '300' height ='300' style ="width : 60% ; height: auto;"></canvas> <button onclick ="clearInterval(stop);" >Mettre fin à l'animation</button>

Si clic sur le bouton de commande provoque l'arrêt de l'animation.

Le script : var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); var X = canevas.width ; var Y = canevas.height; var maxi = X/2; var rayon = 10; var variation = 1 ; contexte.fillStyle ='orange'; var stop = setInterval(animate,100); function animate() { contexte.clearRect(0,0, X,Y) ; contexte.beginPath(); contexte.arc(X/2, Y/2,rayon, 0, Math.PI*2); contexte.fill(); if (rayon >= maxi) variation = -1 ; if (rayon <= 10) variation = 1 ; rayon = rayon + variation ; } // fin fonction animate

Au travers de cet exemple simple vous devez comprendre le principe de l'animation automatique dans CANVAS.
Grâce à la fonction setInterval on appelle une fonction nommée animate selon une certaine fréquence (toutes les 100 millisecondes soit 10 fois par seconde).

Dans la fonction animate on efface le précédent rond grâce à la méthode clearRect(0,0,X,Y) puis on crée un nouveau cercle avec un rayon différent.
Dès que le rayon atteint la valeur maxi (moitié de la largeur de Canevas) la variable variation devient égal à -1. Donc la variable rayon est décrémentée.
Dès que le rayon redevient égal à 10 variation redevient égal à +1. Donc la variable rayon est incrémentée.

Notez que l'appel régulier de la fonction d'animation est référencé par une variable nommée stop.
Ainsi l'instruction clearInterval(stop) met fin à l'animation.

Animation 2

Le carré est de plus en plus grand et opaque puis de plus en plus petit et transparent ; le cycle recommence. Mais le carré est toujours centré dans le canevas.

Le code correspondant

Le canevas 'responsive' fait 300 par 300.
Le script : var canevas2 = document.querySelectorAll('canvas')[1]; var contexte2 = canevas2.getContext('2d'); var X2 = canevas2.width ; var Y2 = canevas2.height; var opacite =0.1; var delta =0.05; contexte2.fillStyle ='olive'; var cote = 10; // valeur initiale du cote du carré noir var variation = 1 ; // valeur initiale de sens de variation var x = (X2-cote)/2 ; var y = (Y2-cote)/2; // coordonnées initiales de l'arête supérieure gauche du carré var stop2 = setInterval(animate2,50); function animate2() { contexte2.clearRect(0, 0, X2, Y2); // effacement canevas contexte2.globalAlpha = opacite; contexte2.fillRect(x, y, cote, cote); // dessinner carré de fond olive if (cote >= X2) {variation = -1 ; delta = -0.01; } if (cote <= 10) {variation = 1 ; delta =0.01; } cote = cote + variation ; //nouvelle cote du carré opacite = opacite + delta; x = (X2-cote)/2 ; y = (Y2-cote)/2 ; // nouvelles coordonnées de l'arête supérieure gauche du carré }

Le script est un peu plus compliqué car il faut calculer à chaque fois les nouvelles coordonnées de l'angle haut gauche du carré afin qu'il soit toujours centré.

Imaginez les deux instruction HTML ! : une pour dessiner le canevas et une autre pour dessiner le bouton de commande avec fin de l'animation si clic.

Animation 3

Cette fois c'est le visiteur qui par clic successifs change l'aspect du rond.

L'animation

Le rond est d'abord très transparent puis à chaque clic dans le canevas il devient de plus en plus grand et de plus en plus opaque.

Le script correspondant

Ce troisième canevas 'responsive' de la page fait aussi 300 par 300.
Le script : function script3() { var canevas = document.querySelectorAll('canvas')[2]; var contexte = canevas.getContext('2d'); X = canevas.width; Y = canevas.height; contexte.fillStyle ='purple'; var opacite =0.1; var rayon = 20; var variation = 5 ; var maxi =X/2; var rond = new Path2D(); rond.arc(X/2,Y/2,rayon,0, 2 * Math.PI); contexte.globalAlpha = opacite; contexte.fill(rond); canevas.onclick = function() { contexte.clearRect(0,0,X,Y); rayon = rayon + variation ; if (rayon>=maxi) rayon = maxi; rond.arc(X/2,Y/2,rayon,0, 2 * Math.PI); contexte.fill(rond); opacite = opacite + 0.05; contexte.globalAlpha = opacite; } // fin fonction anonyme } // fin fonction script3 script3();

J'utilise le constructeur d'objets Path2D pour définir une forme graphique (un rond) en début de script.

Dans ce troisième script de la page on retrouve des variables qui portent le même nom que pour le premier script (canevas, contexte, X, Y, rayon, maxi, opacite, etc.). Et pourtant il n'y a aucune ambiguïté car ces variables sont définies dans le cadre d'une fonction donc sont locales !

Animation 4

Ci-dessous un document HTML dans un Iframe.
Ce document comprend un canevas.

Les carrés sont bordurés de bleu et de plus en plus grand.
Il n'y a pas de bouton de commande : un clic sur le canevas pour démarrer l'animation ; l'arrêt est automatique.

Le script correspondant

Intérêt de cette animation

Il s'agit de l'animation d'un modèle de forme réalisé avec le constructeur Path2D().
La fonction d'animation n'intègre pas l'instruction clearRect() puisque les dessins doivent s'ajouter.