L'élément HTML 5 Canvas

Pour commencer, voyons brièvement qu'est-ce que ce fameux élément Canvas.




Introduction


Le HTML 5 introduit dans ses spécifications la balise <canvas>.
Cette balise est plutôt récente et n'est pour le moment implémentée que par quelques navigateurs:

  • Firefox

  • Opéra

  • Safari

  • Konqueror



Internet Explorer est encore en retard là dessus ... Vos applications Canvas ne pourront pas être executées sur tous les navigateurs, il faut bien garder cela en tête.

Chaque élément canvas dispose d'un contexte. En gros une zone sur laquelle on pourra afficher, dessiner des graphiques.
Il y'a deux types de contextes: 2D et 3D.

Seul Opéra supporte en version bêta le contexte 3D. Nous allons donc uniquement utiliser du contexte 2D dans notre tuto.

Une fois qu'un élément HTML canvas est déclaré, il faudra utiliser du Javascript pour créer les graphiques dynamiques.



Déclaration du canvas en HTML


La déclaration de l'élément est relativement simple:

Code html:
<canvas id="canvasElem" width="400" height="300">
    Texte si le navigateur ne supporte pas le HTML Canvas
</canvas>


L'élément canvas prend en paramètres:

  • width: La largeur de la zone

  • height: La hauteur de la zone

  • id: L'id de l'élément qui servira au Javascript



Si vous voulez voir toute la spécification HTML 5 sur le Canvas, rendez vous sur ce lien.

Bon, notre élément Canvas est déclaré, maintenant, il va falloir dessiner dedans !


Initialiser le contexte 2D avec du Javascript


Avec du Javascript (Avec ou sans framework), nous allons récupérer l'objet Canvas précedemment déclaré.
Comme n'importe quel élément, on le récupère par son ID "canvasElem":
Code js:
// On récupère l'objet canvas
var elem = document.getElementById('canvasElem');


Une fois que l'élement est récupéré, on peut récupérer le contexte 2D pour pouvoir ensuite le manipuler.

Code js:
// On récupère le contexte 2D
var context = elem.getContext('2d');


Ca y'est ! Notre contexte est prêt à être manipulé.
Pour faire plus propre, voici comment déclarer correctement la récupération de l'élément et du contexte 2D:
Code js:
window.addEventListener('load', function () {
  // On récupère l'objet canvas
  var elem = document.getElementById('canvasElem');
  if (!elem || !elem.getContext) {
	return;
  }

  // On récupère le contexte 2D
  var context = elem.getContext('2d');
  if (!context) {
	return;
  }

  // Le navigateur est compatible, le contexte a bien été récupéré, on peut continuer...

}, false);


Quelques fonctions basiques pour créer des graphiques


Voyons rapidement comment il est possible de créer des graphiques dans notre contexte 2D.
Nous verrons plus en détail chacune de ces fonctions lors de la création de notre casse briques.

En attendant, voici un Sheet Cheat qui répertorie toutes les fonctions qu'on pourra être amené à utiliser dans notre jeu:







Rechercher sur la Ferme du web