Dessin sur Canvas
JavaScript est utilisé pour dessiner sur le canevas. Nous allons procéder étape par étape.
1. Trouver l'élément Canvas
Pour trouver l'élément canvas, utilisez la méthode HTML DOM : getElementById() :
Dessin sur Canvas
var canvas=document.getElementById("canvas");2. Créer un objet de dessin
Utilisez la méthode getContext() pour obtenir un contexte de dessin, qui fournit des propriétés et des méthodes :
Dessin sur Canvas
var ctx = canvas.getContext("2d");3. Dessiner sur l'élément Canvas
Vous pouvez maintenant dessiner sur le canevas. La propriété fillStyle peut être une couleur CSS, un motif ou un dégradé.
Dessin sur Canvas
ctx.fillStyle = "#1c87c9";Vous pouvez également utiliser la méthode fillRect(x, y, width, height) pour dessiner un rectangle plein sur le canevas. Les paramètres spécifient les coordonnées x et y du coin supérieur gauche, suivies de la largeur et de la hauteur :
Dessin sur Canvas
ctx.fillRect(0, 0, 230, 130);Exemple de la balise HTML <canvas> :
Exemple de la balise HTML <canvas>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px solid #dddddd;">
The canvas tag is not supported by your browser.
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#1c87c9";
ctx.fillRect(0, 0, 230, 130)
</script>
</body>
</html>Pratique
Quels sont les éléments requis pour dessiner sur un canevas HTML ?