Animations de Canvas en HTML5

Lassé des problèmes liés à Flash et à la non compatibilité (et au poids, et à la puissance nécessaire et…) de celui ci avec mon iPad préféré, j'ai commencé à regarder plus attentivement les alternatives, et notamment HTML5 et Canvas. L'excellent Podcast de Dan Benjamin (The DevShow) m'avait déjà donné quelques pistes. J'ai ensuite trouvé le site web de Paul Hamill et j'ai commencé à faire mes propres expériences.

Et si on commençait?

canvas element not supported in this browser

J'ai repris dans le corps de ce tte page presque lettre pour lettre l'exemple de Paul Hammill. Si vous ne le voyez pas, vous n'avez probablement pas le même browser que moi (testé sous Safari 4, Chromium et Firefox 3.6). Je commence par mettre sur la page html le canvas dans lequel je vais dessiner: Ensuite j'initialise dans un javascript tout un ensemble de variables, et je récupère un contexte graphique dans lequel dessiner à partir du canvas présent dans la page: function init() { elt = document.getElementById('canv'); context = elt.getContext('2d'); createCircles(20); draw(); } On y crée 20 objets de type cercle que l'on stocke dans un array (createCircles(20)). La fonction createCircles est un peu longue et fastidieuse, pas très intéressante. Ensuite, on dessine toutes les (1000/20)=50 millisecondes pour avoir 20 images par secondes (on devrait réussir à avoir mieux). A chaque fois qu'on dessine, on refait le fond car sinon, on redessine sur l'image précédente (c'est assez perturbant). Commentez tout ce code pour voir ce que ça donne;-) Voilà où j'en suis... Il n'est pas déraisonnable d'imaginer qu'un éditeur vienne avec un outil pour concevoir graphiquement des dessins sur Canvas, quand on voit déjà qu'Opacity Express est capable de créer du code pour du dessin vectoriel.