tete du loic

 Loïc YON [KIUX]

  • Enseignant-chercheur
  • Référent Formation Continue et alternance ingénieur
  • Responsable de la filière F2 ingénieur
  • Secouriste Sauveteur du Travail
mail
loic.yon@isima.fr
phone
(+33 / 0) 4 73 40 50 42
location_on
Institut d'informatique ISIMA
  • twitter
  • linkedin
  • viadeo

HTML5 / Ruguedebi

Date de première publication : 2013/05/01

Allez l'ASM !

Pour manipuler le canvas, on aurait pu faire un truc utile : afficher des statistiques de production par exemple mais je préfère vous montrer une animation.

Ce n'est pas du flash ... Appuyer sur une touche.

Votre navigateur n'est pas capable d'afficher l'animation (HTML5 Canvas) !

Vers l'implémentation

Voici quelques éléments pour développer cette petite animation :

Image

Pour manipuler une image, on peut le faire comme cela :

var image = new Image();
image.src = "fichier";
image.onload = function() {
   contexte_graphique.drawImage(image, x, y);
};

Il est important de ne manipuler l'image que quand elle est effectivement chargée. Il y a plein de variantes de drawImage() et clearRect() permet d'effacer une zone uniforme.

Animation

Pour lancer l'animation, il faut que la page soit chargée, par exemple :

window.addEventListener("load", function() {});

La fonction setInterval() permet d'exécuter une fonction à une fréquence donnée.

Pour une animation, je vous conseille l'usage de requestAnimationFrame() qui est particulièrement adapté si le navigateur est récent (séquencement avec l'affichage).

Plusieurs éléments à animer

Pour animer plusieurs éléments (ce que l'on appelle des sprites en animation/jeu vidéo), le modèle objet est particulièrement indiqué.

Chaque instance aura ses propres données d'affichage et de déplacement, le code des méthodes sera partagé

En JavaScript pas trop récent, il faut passer par une fonction "constructeur" créer les objets.

Plein écran

Il est beaucoup plus facile de faire du fullscreen en 2018 que lors de la première écriture de cette page ! Voici les fonctions disponibles, faites attention à la casse car cela a changé depuis les débuts de la norme...

element.requestFullscreen(); // pas de majuscule à screen
element.mozRequestFullScreen();  // 
element.webkitRequestFullscreen(); // la majuscule est partie aussi

document.exitFullscreen(); // pour la version standard, avec des préfixes pour les autres et s'appelle parfois cancelFullScreen()

Pour des questions de sécurité, le plein écran est associé à l'élément que l'on veut mettre en pleine page et doit être déclenché explicitement par une action utilisateur (clic, touche) ... pour éviter des problèmes comme le phishing.

#essai:-webkit-full-screen  { 
  position: fixed;
  width: 100%;
  top: 0;
  background: none;
}

Pour plus de renseignements, un article sur mozilla explique bien le fullscreen. J'aime bien cette page-là également.

Bestiaire