Exemple
var c = document.getElementById(« myCanvas »);
var ctx = c.getContext(« 2d »);
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Essayez-le vous-même
Tracer un cercle dans une surface donnée dite « toile »
(0,0)
(800,400)
Modifier la trajectoire de la ligne
Cliquez sur le bouton pour dessiner votre ligne sur la toile.
Le code expliqué
La formule pour faire un cercle est assez simple.
.arc(x,y,r,start,end);
| x | Coordonnée x du centre du cercle |
|---|---|
| y | Coordonnée y du centre du cercle |
| r | Rayon du cercle |
| start | Angle de départ (0 est à 3 heures sur le cercle) exprimé en radian |
| end | Angle de fin, exprimé en radian |
| counterclockwise | Les mesures d’angles de la commande arc() utilisent le radian comme unité. Le radian est souvent utilisé en mathématiques plutôt que le degré. Un radian est simplement l’angle décrit que vous tracez le rayon d’un cercle autour de la circonférence de ce même cercle. Les radians sont généralement exprimés avec la constante pi. Il y a donc 2 pi radians dans un cercle complet. Javascript intègre la constante Math.PI pour faciliter le travail avec pi. Vous pouvez utilisez les indications suivantes pour déterminer les principaux angles.
Nord : 3*Math.PI/2 Si vous êtes à l’aise avec les mesures en radians, vous pensez sûrement que les angles sont inversés (habituellement, pi/2 correspond au nord et 3* pi/2 au sud). Les angles sont inversés car Y décroit dans les systèmes informatiques. |