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 si vous en avez envie).
1. La balise canvas de base
Dans son utilisation la plus simple possible, la balise <canvas> ne prendra qu'un...
- 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