22
déc.
2009
déc.
2009
Amusons-nous avec HTML5 et la balise Canvas
Java / JEE ›
Articles
|
Tags :
html-css,
javascript
Par Olivier Croisier
Je me suis un peu amusé avec la nouvelle balise HTML5 Canvas et l'API Javascript associée...
Si vous avez un navigateur récent, vous devriez pouvoir voir et contrôler les flammes :
Sleep (ms) : | ||
Atténuation : | ||
Fire seed : | ||
Black seed : |
Je vous invite à regarder le code source de la page pour plus de détails !
Commentaires
ça me rappel les Gif animés des sites internet d'autre fois (il y'a bien longtemps d'ailleurs !)
Ça manque d'un bouton "Éteindre le feu"! (signé le ch... de service ;-) )
Autre souci (un peu plus gênant pour le coup) : si le navigateur est trop vieux (au hasard, IE), l'alerte ne cesse de s'afficher, et on ne peut plus fermer la fenêtre : on est obligé de tuer le processus dans le Gestionnaire de tâches. Dommage...
Mais sinon, le principe de l'animation est sympa.
Effectivement c'est mieux avec un bouton extincteur.
On ne sait jamais ce qu'il peut arriver quand on joue avec le feu :)
Hé, hé... :-)
Tiens, bah, au passage, cette magnifique animation peut même être le sujet d'un quizz JavaScript.
Pour ceux qui ont regardé le code, vous avez remarqué que la gestion du timer de l'animation, telle qu'elle est implémentée ici, posait un gros problème de robustesse ?
Je vous donne un indice dans 48 heures.
Apparemment, mon quiz ne rencontre pas beaucoup de succès. :-\ Enfin, bon, on va dire que c'est à cause des fêtes...
Voici donc l'indice : vous avez essayé de démarrer 2 fois de suite l'animation sans l'arrêter entre les deux ? Rien ne semble clocher ? Normal. Mais essayez donc ensuite de l'arrêter... Je vous souhaite bon courage !
Moi je sais, moi je sais ! :)
Effectivement il faudrait faire un petit test pour éviter de lancer plusieurs fois le calcul en parallèle.
Au passage, on me signale que l'animation marche sur l'iphone (wekbit inside) et android.