Canvas - Le graphisme dans un navigateur

La balise canvas est définie dans HTML 5, et elle implémentée dans tous les navigateurs.
Elle permet d'afficher du graphisme en 2D dans le navigateur et ainsi faire de celui-ci une plateforme d'applications web riches.

Comment utiliser Canvas

La balise n'a que deux attributs: width et height (largeur et hauteur), outre les attributs génériques comme id, name, class... Son but est de marquer l'emplacement où l'on veut insérer une surface de dessin (techniquement appellée "contexte de rendu").

Le corps de la balise n'est pas affiché par les navigateurs qui implémentent Canvas mais seulement par les autres, et constitue donc un moyen de fournir un contenu alternatif.

Utiliser Canvas est très simple, le code ci-dessous montre une application minimale:

<canvas id="c1" width="400" height="100">
   Non implémenté.
</canvas>

Cela a défini un emplacement et son identifieur, reste à ajouter un contenu graphique:

var canvas = document.getElementById(c1); 
if (canvas.getContext)
{    
    var ctx = canvas.getContext('2d'); 
    ctx.fillRect(100,0,80,80);       // afficher un rectangle plein
}  

Pour démarrer le script on peut utiliser l'évènement onload associée à la balise <body> ou à l'élément window. Dans la démo on crée la fonction canvasFun() et on l'assigne à onload:

window.onload.canvasFun;

Nous allons étudier dans les prochains articles les méthodes graphiques et leur utilisation.

Test et démo de Canvas

Ce script sert à tester l'implémentation de Canvas sur votre navigateur et montre quelques applications très simples de cette balise de HTML 5.

Les images doivent être affichées sur Firefox, Safari, Chrome, Opera.
Internet Explorer 8 et les versions précédentes affichent le message: "Non reconnu!".

Afficher un rectangle bleu

Non reconnu!

Code HTML

<canvas id="c1" width="400" height="100">
Non reconnu!
</canvas>

Afficher un cercle vert

Non reconnu!

Code HTML

<canvas id="c2" width="400" height="100">
Non reconnu!
</canvas>

Code JavaScript

function canvasFun()
{
  var canvas = document.getElementById('c1');
  if (canvas.getContext)
  {
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(0,20,180)";
    ctx.fillRect(100,0,80,80);
  }
  var canvas = document.getElementById('c2');
  if (canvas.getContext)
  {
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = "rgb(0,128,0)";
    ctx.arc(140, 45, 40,0, Math.PI+(Math.PI*2)/2,true);
    ctx.stroke();
  }
}
window.onload=canvasFun;

La fonction canvasFun trace un rectangle plein dans la première balise canvas et un cercle dans la seconde.
Mais si la balise n'est pas reconnue par le navigateur, c'est le texte contenu qui est affiché.

Compatibilité et ressources

Canvas fonctionne actuellement sur: Firefox, Safari, Chrome, Opera, Internet Explorer 9. Des plugins permettent de l'ajouter à Internet Explorer 8 et antérieur.

Plus de ressources

© 2008-2012 Xul.fr