Médiaforma

All posts tagged rect

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.


Cette rubrique s’appuie sur la précédente. Elle va vous montrer comment tracer des rectangles dans un canevas.

Voici le code utilisé :

Le canevas mis en place est le même que dans la rubrique précédente. Pour y afficher un rectangle, nous avons inséré un bouton à l’aide d’un formulaire. Ce bouton exécute la fonction JavaScript rectangle() lorsqu’il est pressé.

Examinons cette fonction.

Les deux premières instructions de la fonction rectangle() vous sont familières. Elles récupèrent le contexte du canevas. Pour afficher un rectangle plein, on commence par définir sa couleur de remplissage en initialisant la propriété fillStyle du contexte. Ensuite, il suffit d’exécuter la fonction fillRect() à laquelle on transmet les coordonnées de l’angle supérieur gauche du rectangle, ainsi que la largeur et la hauteur du rectangle. Ici, le rectangle sera affiché à 10 pixels du bord gauche et à 40 pixels du bord supérieur du canevas. Il aura une largeur de 130 pixels et une hauteur de 60 pixels.

Voici le résultat :