Utilisation de chemins pour dessiner des arcs dans les techniques du didacticiel HTML5 Canvas_html5

Cet article est traduit de Steve Fulton et Jeff Fulton HTML5 Canvas, chapitre 2, « Méthodes de chemin avancées, arcs »

Dans le dessin sur toile, « arc » peut être soit un cercle complet, soit une partie de la circonférence.

Copier le code

Le code est le suivant :

context.arc()
context .arc(x, y, radius, startAngle, endAngle, antihoraire)

Dans la description de la méthode ci-dessus, x et y définissent le centre du cercle et radius définit le rayon du cercle. startAngle et endAngle sont exprimés sous forme de valeurs de coordonnées polaires. dans le sens inverse des aiguilles d'une montre (booléen) définit la direction de l'arc.

Par exemple, si nous voulons tracer un cercle avec le point (100, 100) comme centre et un rayon de 20, nous pouvons utiliser le code suivant :

Copiez le code

Le code est le suivant :

context.arc(100, 100, 20, (Math.PI/180)* 0, (Math.PI/180) *360, false);

L'effet d'exécution est :

Il convient de noter que dans le code ci-dessus, nous devons convertir l'angle de départ (0) et l'angle de fin (360) en radians de coordonnées polaires en multipliant par (Math.PI/180). Lorsque l’angle de départ est de 0 et l’angle de fin de 360, vous obtenez un cercle complet.

En plus des cercles complets, nous pouvons également dessiner des segments d'arc. Le code suivant dessine un quart de cercle :

Copiez le code

Le code est le suivant :

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

Si nous voulons dessiner trois quarts supplémentaires du cercle en plus de l'arc ci-dessus, nous pouvons régler le sens inverse des aiguilles d'une montre sur vrai :

Copier le code

Le code est le suivant :

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)* 90, vrai);

Note de traduction 1 : Dans le système de coordonnées Canvas, la direction de l'axe Y est vers le bas.

Annotation 2 : Vous pouvez également dessiner des arcs en utilisant la méthode context.arcTo(). La description de cette méthode dans le livre HTML5 Canvas original de Steve Fulton et Jeff Fulton est complètement fausse. Pour le résumé correct de arcTo(), voir : arcTo de courbe .