Le menu est disponible grâce au bouton 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.
- ESPACE pour mettre en pause
- P pour mettre en plein écran (ECHAP/ESC pour en sortir) si votre navigateur le permet
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.
- Firefox zoome l'élément en pleine page depuis longtemps.
- Chrome et Safari mettent en pleine page mais ne zooment pas par défaut (Chrome 50 et Safari 9.1), il faut du CSS spécifique. Voici le code
#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.
