Médiaforma

Un rectangle dans un canvas

Print Friendly

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 :

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

No comments yet.

Leave a Reply