Médiaforma

Un cercle dans un canvas

Print Friendly

Dans cette rubrique, vous allez apprendre à tracer des cercles dans un canevas.

Voici le code utilisé :

Le canevas est le même que celui utilisé dans les deux rubriques précédentes. Nous n’y reviendrons pas.

Pour afficher un cercle, nous avons inséré un bouton dans un formulaire. Lorsque l’utilisateur clique sur ce bouton, la fonction JavaScript cercle() est exécutée. Examinons les instructions qui la composent.

Les deux premières lignes récupèrent le contexte du canevas et le stockent dans la variable ctxt.

La ligne suivante définit la couleur de remplissage du cercle en initialisant la propriété fillStyle du canevas.

La fonction beginPath() indique qu’un tracé va être effectué. Nous retrouverons cette fonction dans toutes les instructions de tracé (lignes, courbes de Bézier, etc.). Elle n’a pas été nécessaire pour afficher le rectangle car nous avons utilisé la fonction fillRect() qui nous a permis de tracer directement un rectangle plein, sans effectuer de tracé préalable. Pour afficher un cercle plein, nous allons dans un premier temps le tracer, et dans un deuxième temps le remplir.

Le tracé du cercle se fait avec la fonction arc() :

  • Les deux premiers paramètres représentent le centre du cercle.
  • Le troisième paramètre représente le rayon du cercle.
  • Les quatrième et cinquième paramètres représentent l’angle de départ et l’angle de fin. Ces deux paramètres doivent être exprimés en radians. Comme vous le voyez, cela ne pose pas de problème, car la fonction Math.PI est là pour faciliter les choses. Il suffit de savoir qu’un cercle fait 2 PI radians, et le tour est joué.
  • Enfin, le cinquième paramètre définit le sens du tracé. Dans cet exemple, ce paramètre n’a aucun intérêt. Sachez cependant qu’il peut prendre la valeur false (tracé dans le sens des aiguilles d’une montre) ou true (dans le sens inverse des aiguilles d’une montre).

La dernière instruction de la fonction cercle() remplit le cercle avec la couleur de remplissage définie dans la propriété fillStyle.

Voici le résultat :

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

No comments yet.

Leave a Reply