Premiers pas avec Canvas
Canvas est une balise HTML pour une surface de dessin interactive implémentée. Son utilisation est très simple.
En effet, pour utiliser Canvas, trois choses seulement sont nécessaires:
- La page doit avoir le doctype HTML 5.
- Une balise <canvas>.
- Un script en JavaScript
1) Le doctype HTML 5
Il est surtout nécessaire pour Internet Explorer 9, il est indispensable de préciser un DOCTYPE de type HTML 5 sur la première ligne de la page, sous la forme suivante:
<!DOCTYPE html>
Pour Internet Explorer vous pouvez aussi ajouter dans la section HEAD:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Cela évite qu'il change le mode de présentation de la page quand il ne peut la valider.
2) Une balise canvas
Un id est nécessaire pour accèder à la balise en JavaScript:
<canvas id="moncanevas" width="400" height="300"></canvas>
Cette balise n'a pas de contenu HTML, sauf un message ou contenu qui s'affiche seulement dans les navigateurs anciens qui ne reconnaissent pas HTML 5. Par exemple:
<canvas id="moncanevas" width="400" height="300">
Canvas n'est pas implémenté dans ce navigateur.
</canvas>
3) Un script en JavaScript
Le contenu utile est donné dynamiquement par du code JavaScript. Par exemple, on peut afficher un rectangle bleu.
canvas = document.getElementById("moncanevas");
if (canvas.getContext)
{
context = canvas.getContext('2d');
}
function rectangle()
{
context.fillRect(100,0,80,80);
}
Le script sera démarré par l'évènement onload associée à la balise <body> ou à l'élément window.
Dans l'exemple on crée la fonction setCanvas() et on l'assigne à onload:
function setCanvas()
{
var canvas = document.getElementById("moncanevas");
var context = canvas.getContext("2d");
context.fillStyle = "blue"
context.fillRect(100,0,200,100);
}
window.onload=setCanvas;
L'attribut fillStyle assigne une couleur courante au contexte, qui sera celle des objets dessinés par la suite. On peut lui assigner un nom de couleur, un code rgb ou rgba.
La méthode fillRect affiche un rectangle rempli avec la couleur courante, et à pour paramètres, x, y, largeur, hauteur.
Démonstration (Firefox, Chrome, Internet Explorer 9):
Liste des fonctions graphiques de l'API Canvas
- Canvas 2D Context. Specification W3C.
Regardez cette démonstration
- Zoomquilt. Dans le même esprit que infinite Oz qui est réalisé en Flash, mais cette fois en JavaScript dans Canvas, une image sans fin qui à coté du divertissement qu'elle apporte, permet de comparer la vitesse des navigateurs.
Voir aussi