> >

HTML5 Canvas Javacript Les bases Javacript pour réaliser une animation HTML5 Canvas


Animer un site avec 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
Créer une animation interactive HTML5


animation HTML5 canvas avec Javascript 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 :

var stage = new createjs.Stage("canvas");


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

var frequency = 3;
stage.enableMouseOver(frequency);



animation HTML5 canvas avec Javascript 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 :

var variable_cacher=false;
this.bouton.on("click", cacher.bind(this));// Déclaration de l'évènement click de la souris sur le bouton

function cacher() {
variable_cacher=!variable_cacher;// Changement de la valeur de la variable à chaque clic
if(variable_cacher)
{
this.mon_image.visible=false;// On cache l'image
}else{
this.mon_image.visible=true;// On affiche l'image
}};

<Exemple 1>


• 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 :

this.mon_image.on("pressmove", Deplacement_Image.bind(this));
function Deplacement_Image() {
this.mon_image.x = stage.mouseX; // stage.mouseX = Position X de la souris dans le Canvas
this.mon_image.y = stage.mouseY; // stage.mouseY = Position Y de la souris dans le Canvas
}

<Exemple 2>


Si vous aimez les articles, n'hésitez pas à faire vos achats sur Amazon via ce lien, ils me permettront de recevoir une commission grâce au programme Partenaires Amazon EU.