HTML5 Canvas - 3.0 Dessiner un cercle avec arc

Le cercle se dessine sur Canvas avec la méthode arc. Elle attend un centre, un rayon et des angles exprimés en radians. Cette leçon montre aussi comment colorer l'intérieur et le contour du cercle.

Les valeurs de arc

La méthode arc attend les coordonnées X et Y du centre, le rayon, l'angle de départ et l'angle de fin. Les angles sont exprimés en radians et non en degrés.

Le dernier paramètre, facultatif, indique le sens anti-horaire. Par défaut, le tracé se fait dans le sens horaire. Un tour complet correspond à 2π radians.

context.fillStyle = 'orange';
context.strokeStyle = 'orange';
context.arc(300, 150, <rayon>, 0, <angle-de-fin>);
context.fill();
context.stroke();

Remplir et contourner le cercle

fillStyle colore l'intérieur du cercle, et strokeStyle colore la ligne qui l'entoure. La vidéo utilise l'orange pour les deux.

Le cercle orange sert de base à la leçon suivante, qui dessine Pac-Man.

En résumé

La méthode arc dessine un cercle à partir d'un centre, d'un rayon et d'angles en radians. fillStyle colore l'intérieur et strokeStyle colore le contour. Ce tracé sert de base aux formes suivantes.

Points clés

• arc attend un centre, un rayon, un angle de départ et un angle de fin.
• Les angles sont exprimés en radians.
• Le sens horaire est le sens par défaut.
• fillStyle colore l'intérieur, strokeStyle colore le contour.

Questions fréquentes

Pourquoi mon cercle ressemble-t-il à un demi-cercle ?

Vérifiez les angles. Un cercle complet va de 0 à 2π radians. Des angles donnés en degrés produisent un résultat inattendu.

Comment ne colorer que le contour ?

Appelez stroke sans fill. Seule la ligne qui entoure le cercle est alors dessinée.

Que signifie le sens horaire ?

C'est le sens de rotation des aiguilles d'une montre. Le paramètre anti-horaire inverse ce sens lorsqu'il est activé.