Dessinez sur la toile avec JavaScript
Tout dessin sur le canevas HTML doit être fait avec JavaScript:
Exemple
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Essayez - le vous - même » Étape 1: Trouver l'élément Canvas
Tout d' abord, vous devez trouver le <canvas> élément.
Ceci est réalisé en utilisant la méthode DOM HTML getElementById() :
var canvas = document.getElementById("myCanvas");
Étape 2: Création d'un objet de dessin
Deuxièmement, vous avez besoin d'un objet de dessin pour la toile.
Le getContext() est un objet HTML intégré, avec des propriétés et des méthodes de dessin:
var ctx = canvas.getContext("2d");
Etape 3: Dessiner sur le canevas
Enfin, vous pouvez dessiner sur la toile.
Définir le style de remplissage de l'objet de dessin à la couleur rouge:
ctx.fillStyle = "#FF0000";La propriété fillStyle peut être une couleur de CSS, un dégradé ou un motif. Le fillStyle par défaut est noir.
Le fillRect( x,y,width,height ) méthode dessine un rectangle, rempli avec le style de remplissage, sur la toile:
ctx.fillRect(0,0,150,75);