Médiaforma

Une autre façon de tracer un rectangle plein dans un canvas

Print Friendly

Dans une rubrique précédente, vous avez appris à tracer un rectangle plein avec la fonction fillRect(). Dans cette rubrique, vous allez apprendre à tracer des rectangles vides et des rectangles pleins avec la fonction rect(). Voici le code utilisé :

Le tracé des rectangles est effectué avec deux boutons insérés dans un formulaire.

Le premier bouton exécute la fonction rectangleVide() et le deuxième la fonction rectanglePlein().

Examinons le code JavaScript mis en œuvre dans ces deux fonctions.

La fonction rectangleVide() trace un rectangle sans le remplir. Après avoir récupéré le contexte du canevas, la fonction beginPath() est exécutée pour indiquer qu’un nouveau tracé va commencer. Ce tracé est effectué avec la fonction rect(). Ses deux premiers paramètres définissent les coordonnées du coin supérieur gauche du rectangle. Ses deux derniers paramètres définissent la largeur et la hauteuir du rectangle.

La fonction stroke() réalise le tracé.

La fonction rectanglePlein() trace un rectangle et le remplit. Après avoir récupéré le contexte du cannevas, la fonction beginPath() indique que le tracé va commencer. Le rectangle est tracé avec la fonction rect(), similaire en tout point à celle utilisée dans la fonction rectangleVide(). L’instruction suivante définit la couleur de remplissage du rectangle en initialisant la propriété fillStyle. Enfin, la fonction fill() trace le rectangle et le remplit.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply