Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Activité Canvas N°1 : animer un forme simple sur une page Web ======
Ressources : https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques
===== Présentation =====
Le langage **Javascript** va permettre de créer des **animations interactives** du composant <Canvas> (canevas).
<WRAP center round info>
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.
</WRAP>

===== 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.
 
<html>
<iframe src="https://trinket.io/embed/html/206892cf45" width="100%" height="400" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
</html>
==== Activité Les langages pour créer des sites Web ... ====
<WRAP center round info >
  * [[isn:langageweb|Les langages pour créer des sites Web]]
</WRAP>