> >

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>


Actus

Les promos du moment

Carrousel slide 1 Profitez de 50€ avec le code NNNFRILIFEG9


Carrousel slide 1 Vidéoprojecteur à 189€99 au lieu de 284€ avec le code NNNFRBBX5

Les vidéos electrotoile

  • Retrouvez l'ensemble des vidéos sur Humix

Réseau sociaux

Rubriques

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

📌 Politique de Confidentialité | Cet article peut inclure du contenu sponsorisé et rémunérédes, des liens d'affiliation, notamment des liens Amazon (programme Partenaire Amazon EU)
me permettant de toucher une commission au pourcentage sur la vente des produits affiliés (sans augmentation de prix pour l'acheteur).

❤️💟 Si vous aimez les articles et pour soutenir le développement du site n'hésitez pas à partager sur les réseaux sociaux youtube facebook instagram pinterest tiktok