Une zone spéciale permettant d'accueillir les graphismes est apparue en HTML 5 : la balise <canvas>. C'est grâce à cette balise que l'on a pu voir apparaître de nombreux jeux et que l'on peut désormais dessiner facilement sur une page web.
L'affichage des écrans de n'importe quel jeu passera par au moins une balise <canvas>. Mais au-delà de l'affichage de simples images, certains jeux permettent de dessiner. Sur les plateformes mobiles, ces jeux se sont rapidement répandus et on peut y trouver par exemple « Cut the Rope » (disponible en HTML 5 [1]), ou des jeux vous demandant de dessiner un parcours pour déplacer un objet vers un point final (« Crayon Physics », etc.).
Cet article permettra de découvrir ou re-découvrir la balise <canvas>, de voir comment y dessiner, y écrire ou encore comment y afficher des images. Pour vraiment élargir le champ d'utilisation des canvas aux jeux, nous étudierons ensuite comment détecter la position de la souris et , pour conclure, nous verrons comment réaliser un effet de scrolling horizontal ou vertical (ou même en diagonale…
- Accédez à tous les contenus de Connect en illimité
- Découvrez des listes de lecture et des contenus Premium
- Consultez les nouveaux articles en avant-première