La balise <canvas> est élément HTML qui peut être utilisé pour dessiner et animer des éléments graphiques à l'aide de scripts JavaScript notamment.
Cette activité présente les bases d'utilisation de l'élément <canvas> pour dessiner des graphiques en 2D.
L'élément <canvas> n'est pas reconnu par les anciens navigateurs. La taille par défaut de <canvas> est 300 px × 150 px (largeur × hauteur) mais des tailles personnalisées peuvent être définies à l'aide des propriétés HTML height et width.
Pour dessiner des graphiques sur un éléments <canvas>, il faut utiliser un objet de contexte JavaScript, qui crée des graphiques à la volée.
Voici un élément <canvas> avec un contenu de repli affichant le texte Canvas non supporté par votre navigateur !.
<canvas id="affichagefleche" width="150" height="150"> Canvas non supporté par votre navigateur ! </canvas>
Explications :
L'élément <canvas> crée une surface vide pour dessiner à grandeur fixe selon un ou plusieurs contextes de rendu. Ici nous utiliserons le contexte de rendu 2D.
Pour afficher quelque chose, le script javascript doit :
<canvas id="mon_canvas" width="350" height="350"> Canvas non supporté par votre navigateur ! </canvas> <script> var canvas = document.getElementById('mon_canvas'); var ctx = canvas.getContext('2d'); </script>
Un canvas est un espace de pixels initialement transparents sue lequel vous pouvez dessiner des formes, mettre des images et les animer.
Ces valeurs correspondent à la grille entourant les pixels, et non pas aux pixels eux-mêmes
Pour réaliser un tracé, il faut utiliser les méthodes suivantes :
ctx.beginPath(); // Début du chemin ctx.moveTo(50,50); // Le tracé part du point 50,50 ctx.lineTo(200,200); // Un segment est ajouté vers 200,200 ctx.moveTo(200,50); // Puis on saute jusqu'à 200,50 ctx.lineTo(50,200); // Puis on trace jusqu'à 50,200 ctx.closePath();
Pour afficher le résultat il faut maintenant préciser les couleurs, le style de trait ou de remplissage :
ctx.stroke();
Cela affiche le tracé avec les couleurs par défaut. Pour modifier les styles par défaut :
// Triangle ctx.beginPath(); // Début du chemin ctx.moveTo(150,80); // Le tracé part du point 150,80 ctx.lineTo(300,230); // Un segment est ajouté vers 300,230 ctx.lineTo(150,230); // Un segment est ajouté vers 150,230 ctx.closePath(); // Fermeture du chemin ctx.fillStyle = "lightblue"; // Définition de la couleur de remplissage ctx.strokeStyle = "sienna"; // Définition de la couleur de contour ctx.lineWidth = 5; ctx.fill(); // Remplissage du dernier chemin tracé ctx.stroke(); // Application du contour
Pour dessiner un Carré ou un rectangle on précise :
fillRect(startx, starty, hauteur, largeur)
clearRect(startx, starty, hauteur, largeur)
Deux méthodes sont disponibles :
arc( x, y, radius, startAngle, endAngle, sensAntiHoraire )
Les angles sont définis en radians avec Math.PI (un tour complet de cercle = 2*Math.PI) et le sens de rotation est contraire aux aiguilles d'une montre lorsqu'il vaut true.
ctx.arc(150,150,100,0,Math.PI*2,true);
Il faut utiliser :
var image = new Image(); image.src = 'hat.jpg'; image.onload = function() { // Cette fonction est appelée lorsque l'image a été chargée ctx.drawImage(this,50,50); // this fait référence à l'objet courant (=image) };
Voici deux liens parmi d'autres pour découvrir l'utilisation des Canvas en HTML 5 :