Tutoriel canvas:Utilisation de base
Un article de MDC.
Sommaire |
[modifier] L'élément <canvas>
Commençons par jeter un coup d'œil à l'élément <canvas> lui-même.
<canvas id="tutoriel" width="150" height="150"></canvas>
Celui-ci ressemble beaucoup à l'élément <img>, la seule différence étant qu'il ne comporte pas d'attributs src et alt. L'élément <canvas> a en effet seulement deux attributs propres - width et height. Ceux-ci sont tous deux optionnels, la taille de l'élément peut également être définie à l'aide de méthodes DOM ou de règles CSS. Lorsque les attributs width et height ne sont pas spécifiés, le canevas sera initialement de 300 pixels de large et 150 pixels de haut.
L'attribut id n'est pas spécifique à l'élément <canvas> mais est l'un des attributs HTML par défaut qui peuvent être appliqués à (presque) tout élément HTML (à l'instar de class par exemple). Il est toujours utile de préciser un identificateur, cela rendra l'élément beaucoup plus facile à utiliser dans notre script.
L'élément <canvas> peut être stylé de la même façon que n'importe quelle image normale (marges, bordures, fond, etc). Ces règles n'affectent cependant pas le dessin du canevas lui-même. Nous verrons comment faire cela plus loin dans ce tutoriel.
Lorsqu'aucune règle de style n'est appliquée au canevas, celui-ci sera initialement totalement transparent.
[modifier] Contenu alternatif
Étant donné que l'élément <canvas> vient seulement d'être introduit et n'est pas implémenté dans beaucoup de navigateurs, y compris Firefox 1.0 et Internet Explorer, il est nécessaire de disposer d'un moyen de fournir un contenu alternatif lorsque le navigateur ne reconnaît pas l'élément.
Heureusement, rien de plus facile : le contenu alternatif est simplement fourni à l'intérieur de l'élément canvas. Les navigateurs qui ne le reconnaissent pas ignoreront complètement l'élément et afficheront le contenu alternatif, les autres afficheront le canevas normalement.
Par exemple, on peut fournir une description textuelle du contenu du canevas ou une image statique du contenu créé dynamiquement. Cela peut ressembler à ceci :
<canvas id="graphiqueAction" width="150" height="150"> prix actuel de l'action : 3,15 € +0,15 </canvas> <canvas id="horloge" width="150" height="150"> <img src="images/horloge.png" width="150" height="150"/> </canvas>
Note : L'implémentation d'Apple diffère actuellement légèrement de la spécification en ce qu'elle ne reconnaît pas la balise de fermeture </canvas>. Cela signifie que dans Safari tout le contenu alternatif sera affiché. Cela peut se résoudre en utilisant soit CSS, soit un script pour le masquer.
[modifier] getContext
Si vous réalisez une page HTML et la chargez dans Firefox, vous ne verrez rien dans la zone occupée par l'élément <canvas>. Il est nécessaire de disposer d'un moyen de commencer à dessiner dedans, et c'est là qu'intervient getContext. Tout élément canvas possède une méthode DOM appelée getContext permettant d'accéder aux fonctions de dessin. getContext peut uniquement prendre un paramètre, et il s'agit du type de contexte de dessin. Pour l'instant, un seul contexte de dessin est disponible, il s'agit du contexte 2d. Dans l'avenir, il se peut que l'on voit apparaître un contexte 3d, mais pour l'instant on se limitera au contexte 2d.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
À la première ligne, le nœud DOM est récupéré à l'aide de la méthode getElementById. Il est ensuite possible d'accéder au contexte de dessin avec la méthode getContext.
[modifier] Empêcher l'exécution dans les autres navigateurs
De la même façon que nous avons fourni un contenu alternatif, il est nécessaire d'empêcher les navigateurs ne supportant pas canvas d'exécuter notre script. Cela peut se faire facilement en testant l'existence de la méthode getContext. Notre bout de code devient quelque chose de semblable à ceci :
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// code de dessin ici
}
Tout le code de dessin doit se situer à l'intérieur de la déclaration if, afin que les navigateurs ne supportant pas <canvas> n'essaient pas de l'exécuter.
[modifier] Mettons le tout ensemble
Si nous mettons le tout ensemble, un modèle simple de document HTML devient semblable à celui fourni ci-dessous. Il sera utilisé pour tous les exemples donnés dans ce tutoriel.
[modifier] Modèle
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
Si vous regardez le fonctionnement du script, vous constaterez qu'il utilise une fonction appelée draw qui sera exécutée une fois le chargement de la page terminé (via l'attribut onload sur la balise body). Cette fonction pourrait également être appelée depuis un évènement créé avec setTimeout, setInterval, ou tout autre fonction de gestionnaire d'évènement du moment que la page a été chargée entièrement au préalable.
C'est tout pour les bases. Dans les pages qui suivent nous verrons comment dessiner réellement.