HTML5 Canvas - 1.7 Dessiner une courbe avec la méthode arc
Après les traits droits, cette leçon montre comment dessiner une courbe sur le canevas. La méthode arc trace une portion de cercle à partir d'un centre et d'un rayon. Nous dessinons trois arcs, bleu, rouge et vert, pour vérifier que chaque tracé respecte bien ses coordonnées.
Comprendre la méthode arc
Pour dessiner une courbe, on utilise la méthode arc du contexte du canevas. Ses deux premières valeurs sont les coordonnées X et Y du centre du cercle.
La troisième valeur est le rayon. Les quatrième et cinquième valeurs sont les angles de début et de fin. Ces angles s'expriment en radians et non en degrés.
Un dernier paramètre, optionnel, détermine le sens de l'arc. Si on ne le précise pas, la valeur par défaut s'applique.
contexte.arc(<x-centre>, <y-centre>, <rayon>, <angle-debut-radians>, <angle-fin-radians>);Tracer trois arcs de couleurs différentes
Dans l'exemple, on dessine un arc bleu, un arc rouge et un arc vert. Chaque arc a ses propres coordonnées, son rayon et ses angles, ce qui permet de comparer l'effet de chaque réglage.
On ouvre ensuite la page HTML pour vérifier le résultat. Les trois arcs apparaissent à l'écran et respectent les coordonnées données.
En résumé
La méthode arc dessine une courbe à partir d'un centre, d'un rayon et de deux angles. Les angles se donnent en radians. Le dernier paramètre, optionnel, règle le sens du tracé. La vidéo annonce une prochaine leçon sur les courbes quadratiques, plus souples que les arcs.
Points clés
- La méthode arc trace une portion de cercle.
- Les deux premières valeurs donnent le centre de la courbe.
- Le rayon est la troisième valeur.
- Les angles de début et de fin sont exprimés en radians.
- Le sens du tracé est un paramètre optionnel.
Questions fréquentes
Pourquoi les angles doivent-ils être en radians ?
La méthode arc attend des radians, et non des degrés. Il faut donc donner les angles dans cette unité.
Le dernier paramètre est-il obligatoire ?
Non. Il est optionnel, et la valeur par défaut s'applique si vous ne le précisez pas.
Comment vérifier que la courbe est bien placée ?
Ouvrez la page HTML dans le navigateur. Vérifiez que chaque arc apparaît au bon endroit, avec le rayon et les angles prévus.