Dessin sur HTML Canvas
- Page précédente Introduction Canvas
- Page suivante Coordonnées Canvas
Dessiner sur le canevas avec JavaScript
Toutes les opérations de dessin sur le canevas HTML doivent être réalisées à l'aide de JavaScript :
Exemple
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Étape 1 : Trouver l'élément Canvas
Tout d'abord, vous devez trouver l'élément <canvas>.
Cela est réalisé en utilisant la méthode DOM HTML getElementById() :
const canvas = document.getElementById("myCanvas");
Étape 2 : Créer l'objet de dessin
Ensuite, vous avez besoin d'un objet de dessin de canevas.
getContext() est un objet HTML intégré qui fournit des attributs et des méthodes pour le dessin :
const ctx = canvas.getContext("2d");
Étape 3 : Dessiner sur le canevas
Enfin, vous pouvez dessiner sur le canevas.
Définissez le style de remplissage de l'objet de dessin en rouge :
ctx.fillStyle = "#FF0000";
L'attribut fillStyle peut être une couleur CSS, une dégradé ou un motif. La valeur par défaut de fillStyle est noire.
La méthode fillRect(x, y, width, height) dessine un rectangle sur le canevas, rempli avec le style de remplissage :
ctx.fillRect(0, 0, 150, 75);
Veuillez également consulter :
- Page précédente Introduction Canvas
- Page suivante Coordonnées Canvas
