Le canavas est une nouvelle balise introduite dans les nouvelles normes du langage HTML5. Elle permet concrètement de dessiner dans un espace rectangulaire définit sur une page web. En plus des dessins en 2 dimensions, nous pouvons également dessiner des formes en 3D grâce l’introduction du WebGL, une variante de la librairie OpenGL conçus pour le Javascript. à noter que le canvas n’est pas compatible avec internet explorer en dessous de sa 9ème version.
Déclaration d’un élément canvas :
<canvas id="canvas" width="640" height="480"></canvas>
Les coordonnées
La gestion des coordonnées est assez simple puisque notre origine se situe en haut à gauche de notre canvas.
Initialisation d’un canvas avec un exemple concret
Ce petit exemple illustre l’initialisation du canvas : on récupère l’objet canvas dans le DOM et on le manipule dans un contexte 2D pour finir par le traçage d’un petit rectangle :
var c = document.getElementById("canvas"); // On récupère notre élément
var ctx = c.getContext("2d"); // Spécifie le contexte dans lequel nous manipulons notre canvas
ctx.fillStyle = "#00F"; // Manipule la couleur de notre contexte
ctx.fillRect(20,10,100,60); // Dessine un rectangle plein (x, y, largeur, hauteur)
Tracer des chemins
Une des caractéristiques du canvas est la possibilité de dessiner un ensemble de traits en suivant des chemins définit dans le code tout comme si vous dessiniez sur une feuille de papier (définir un point de départ et un point d’arrivé).
ctx.moveTo(0,0); // On place notre départ sur la paire de coordonnées (0, 0) ctx.lineTo(20,120); // On termine notre trait sur la paire de coordonnées (20, 120) ctx.stroke(); // On appel la méthode stroke() qui va se charger de dessiner
ctx est ici le contexte de notre canvas utilisé précédemment
Tracer des cercles grâce aux arcs
Pour tracer des cercles, canvas possède la méthode arc() qui permet de tracer des arcs et donc par définition, des cercles en produisant un tour complet.
ctx.arc(50, 50, 20, 0, 2*Math.PI); // (x, y, rayon, angle de départ, angle d'arrivé) ctx.stroke(); // Dessine le cercle
Ici, nous traçons un cercle dont le centre est à la position (50, 50), de rayon 20 et dont l’angle de départ est à 0 radian et celui d’arrivé à 2*PI radian dans le sens des aiguilles d’une montre. À noter qu’un dernier paramètre à la fonction existe pour indiquer si vous souhaiter tracer dans le sens des aiguilles d’une montre (par défaut à true) ou l’inverse. Pour dessiner un cercle plein, et donc un disque, nous aurions pu utiliser la méthode fill() en lieu et place de la méthode stroke()
