Outils pour utilisateurs

Outils du site


isn:canvas2

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

Présentation

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

Dès qu'un forme est dessinée dans un <canvas>, elle reste affichée. Pour la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.

Les étapes d'une animation

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.

Définir le rafraîchissement des images

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.

Activité Les langages pour créer des sites Web ...

isn/canvas2.txt · Dernière modification: 2019/01/31 21:22 (modification externe)