Canvas : animation d'un cercle

Le code de la page (extraits)

... <body> <h1>Extension puis réduction d'un rond</h1> <canvas width = '300' height ='300'></canvas> ... <script> var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); var X = canevas.width ; var Y = canevas.height; var maxi = X/2; // valeur maximale du rayon var rayon = 10; // valeur minimale du rayon var variation = 1 ; setInterval(animate,100); // appel de la fonction tous les 100 millisecondes function animate() { contexte.clearRect(0,0, X,Y) ; // effacement ancien rond contexte.beginPath(); contexte.arc(X/2, Y/2,rayon, 0, Math.PI*2); contexte.fillStyle ='orange'; contexte.fill(); // nouveau rond de fond orange if (rayon == maxi) variation = -1 ; // sens de variation devient négatif if (rayon == 10) variation = 1 ; // sens de variation redevient positif rayon = rayon + variation ; // nouvelle valeur du rayon } // fin fonction animate </script> </body></html>

Commentaire du code

Les dimensions de la balise CANVAS sont fixes (300 par 300 pixels).

Au travers de cet exemple simple vous devez comprendre le principe de l'animation 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 (pixels) variation redevient égal à +1. Donc la variable rayon est incrémentée.

Retour menu