TP méthode 2, à l'aide du canvas HTML
Vous allez devoir reprendre pas mal d'idées proposées dans l'implémentation de la méthode 1.
Apprendre à utiliser un canvas HTML5 pour dessiner des images dedans
- Vous récupérerez ce projet squelette, le dézipperez et l'exécuterez,
- Vous allez regarder le MOOC "HTML5 Coding essential and best practices", module 2 et 3 sur le dessin et l'animation, en particulier la partie consacrée au dessin d'images.
- Avant de dessiner des images, il faut être sûr qu'elles ont toutes été bien chargées. Comme l'initialisation d'une image est une opération asynchrone, on fera appel à un bout de code assez pratique qui va faire le chargement des images à notre place, et nous prévenir quand il aura fini. Regardez dans script.js et dans assets.js comment est géré le chargement des assets. Il s'agit d'une version améliorée d'un "multiple image loader" présenté dans le MOOC HTML5 Coding essentials and best practices.
- Vous allez maintenant compléter le code partout où figurent des
// A FAIRE afin d'afficher correctement les images des cookies. Vous utiliserez la fonction drawImage vues dans le point 2 de cette liste.
Vous n'êtes pas connecté. Connexion 