Activité Canvas N°1 : animer un forme simple sur une page Web

Ressources : https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques

Le langage Javascript va permettre de créer des animations interactives du composant <Canvas> (canevas).

Chaque image dessinée est appelée frame :

• Effacer le canevas avec la méthode clearRect() : c'est la manière la plus simple de faire qui consiste à utiliser la méthode clearRect() pour effacer toutes les formes qui ont été dessinées précédemment.
• Enregistrer l'état du canevas si vous souhaitez vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné alors que vous avez changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.)
• Dessiner les formes avec les modifications souhaitées
• Restaurer l'état du canevas : Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu.

Il faut à intervalle régulier redessiner l'image. Plusieurs moyens existent pour cela :

• s'il n'y a pas d'interaction utilisateur on utilise la fonction setInterval() à intervalle régulier
• S'il y a des interactions avec l'utilisateur et qu'il faut utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser setTimeout(). L'utilisation des EventListener, permet de récupérer chaque interaction et d'exécuter les fonctions d'animation.

setInterval(function, delay)

• Lance la fonction définie par function chaque delay (délai) millisecondes.

setTimeout(function, delay)

• Exécute la fonction définie par function dans delay millisecondes.