Accueil > Informatique > Animation HTML5 Canvas

Les bases Javacript pour réaliser une animation HTML5 Canvas

A cause fin de vie annoncée d'Adobe Flash Player et le développement du standard HTML5, je vous propose dans cet article de découvrir quelques bases pour réaliser une animation en HTML5 Canvas avec le langage Javascript. Cette page sera régulièrement mise à jour, telle un bloc note, en fonction de mes besoins ou découvertes lors de la création des mes animations du site electrotoile.

Les bases de l'HTML5

Pour créer vos animations HTML5 Canvas je vais utiliser la bibilothèque CreateJS utilisant le langage Javascript afin de réaliser des animation interactives permettant de remplacer Flash et son langage de programmation AS3.

• Pour définir la "toile" (Canvas), sur laquelle va apparaître votre animation, il faut taper la ligne ci-dessous :

• Pour créer un évènement MouseOver (la souris passe sur un élément), il faut ajouter ces lignes :

Créer une animation interactive HTML5

Pour rendre interactive une animation, il est nécesssaire d'ajouter des évènements qui réagissent aux interactions de l'utilisateur avec la souris (mousedown, Click, MouseOver, MouseOut, pressmove etc.).

• Pour afficher et cacher une image ("mon_image") à partir d'un clic sur un bouton "bouton", insérez ces quelques lignes :

• Pour qu'une image (rectangle noir) ayant comme nom : "mon_image" suive le déplacement de la souris lorsque l'on clique dessus, utilisez le code ci-dessous :