Initiation à Canvas
Définition : Canvas
La balise HTML <canvas> est utilisée pour faire des dessins graphiques à l'aide d'un script JavaScript. L'élément <canvas> est juste un conteneur pour les dessins, il faut utiliser un script pour dessiner. Canvas permet de dessiner des lignes, des carrés, des cercles, des textes...
Exemple : Code minimal
<canvas id="mon_canvas" width="500" height="500" />
<script type="text/javascript">
var c = document.getElementById("mon_canvas");
var ctx = c.getContext('2d');
// On effectue ici toutes les opérations de dessin</script>
On commence par créer une balise d'identifiant mon_canvas définissant une zone de dessin de 500px de largeur et 500px de hauteur.
On utilise ensuite le DOM pour stocker l'élément mon_canvas dans la variable c.
On lui applique alors la fonction getContext() qui retourne le contexte de dessin (2D ou 3D), c'est-à-dire un ensemble de méthodes et attributs qui permettent de dessiner et manipuler les images dans l'élément mon_canvas. Dans le cadre de l'API Canvas il s'agira toujours de getContext('2d'), getContext('3d') étant du WebGL.
Exemple : Dessiner un carré rouge
<html><body>
<canvas id="mon_canvas" width="200" height="200"
style="border:1px solid #c3c3c3;">
Le navigateur ne reconnaît pas l'élément Canvas
</canvas>
<script>
var canvas = document.getElementById("mon_canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,100,100);
</script>
</body>
</html>
La propriété fillStyle permet de définir la couleur de remplissage.
La méthode fillRect(x,y,largeur, longueur) dessine un rectangle partant de (x,y).
Exemple : Dessiner une ligne
<script>
var canvas = document.getElementById("mon_canvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,100);
ctx.lineTo(200,100);
ctx.stroke();
</script>
La fonction moveTo(x,y) permet de se déplacer au point de coordonnées (x, y) en partant du coin supérieur gauche, cela sans effectuer de tracé.
La fonction lineTo(x,y) définit un tracé jusqu'au point de coordonnées (x, y).
La fonction stroke() permet de dessiner le tracé défini précédemment.
Exercice
Appliquer les fonctions de l'API Canvas. Soit un canvas de taille (200,200).
Dessiner un carré en partant du milieu du canvas de taille (50,50).
Au lieu de dessiner un carré avec "ctx.rect(100,100,50,50)", dessiner un carré en utilisant les fonctions moveTo(x,y) et lineTo(x,y).
Rappel : code de base
<canvas id="mon_canvas" width="200" height="200" />
<script type="text/javascript">
var c = document.getElementById("mon_canvas");
var ctx = c.getContext('2d');
// On effectue ici toutes les opérations de dessin</script>
<html>
<body>
<canvas id="mon_canvas" width="200" height="200"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("mon_canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(150,100);
ctx.lineTo(150,150);
ctx.lineTo(100,150);
ctx.lineTo(100,100);
ctx.closePath();
ctx.lineWidth = 5;
ctx.stroke();
</script>
</body>
</html>
Colorier le carré en rouge.
ctx.fillStyle
ctx.fill()
<script>
var canvas = document.getElementById("mon_canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(150,100);
ctx.lineTo(150,150);
ctx.lineTo(100,150);
ctx.lineTo(100,100);
ctx.closePath();
ctx.lineWidth = 5;
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.stroke();
</script>