Dans l'article sur les lignes de dessin en toile, j'ai parlé de la méthode de dessin de lignes droites. Cet article sur les courbes de dessin aurait dû être publié il y a longtemps, mais parce que les courbes de dessin en toile sont assez spéciales, je ne les ai pas encore compris, donc je dois les essayer étape par étape.
L'une des difficultés de dessiner des courbes dans la toile est qu'elle a 4 fonctions de courbes! Ce sont des arcs, arcto, curveto quadratique, beziercurveto. Permettez-moi de commencer par la méthode d'arc la plus simple.
La fonction de l'arc est de dessiner un arc ordinaire, qui peut être un cercle complet ou un certain arc d'un cercle.
La syntaxe de l'arc est la suivante :context.arc (x, y, rayon, startangle, endangle, dans le sens antihoraire)
Je vais expliquer ses paramètres, c'est-à-dire
Arc (centre X, centre Y, rayon, angle de départ, angle de fin ou s'il est dans le sens antihoraire)
Que devons-nous faire si nous dessions un cercle complet avec l'arc? Tout le monde a remarqué qu'il y avait un angle de départ et un angle d'extrémité dans les paramètres. Si notre angle de départ est 0 et que l'angle d'extrémité est 360, n'est-ce pas un cercle parfait?
Solution correcte! Mais il convient de noter que l'angle ici est représenté par les radians (et le flash aussi). Un cercle complet est à 360 degrés, ce qui est 2PI Radians.
Nous écrivons donc ceci :ctx.arc (400,400,20,0, math.pi * 2);
ctx.fill ();
ctx.stroke ();
Comme LineTo, l'arc est également un chemin à dessiner, nous devons donc appeler la méthode de remplissage ou de trait derrière pour montrer la figure (le strokestyle rouge et le statut de remplissage rouge translucide sont utilisés sur la figure).
Maintenant, dessinons un cercle 1/4, l'angle est de 90 degrés. Comme mentionné précédemment, l'angle de 360 degrés est de 2PI Radians, alors l'angle de 10 degrés est de 2PI / 360 = Pi / 180 Radians, alors 90 degrés est 2PI / 360 * 90 = Pi / 2 Radians (veuillez calculer d'autres angles par vous-même).
ctx.arc (400,400,20,0, math.pi * 2/4);
D'après la figure, nous pouvons déterminer que le 0 degré d'arc est le 0 degré de mathématique couramment utilisé, mais l'angle est ouvert dans le sens horaire par défaut, qui est opposé au modèle mathématique (lié aux coordonnées, car les coordonnées en toile sont également opposées aux coordonnées mathématiques).
Mais n'y a-t-il pas un paramètre devant lui qui détermine s'il a le sens antihoraire? Et si nous le fixons sur vrai?
ctx.arc (400,400,20,0, math.pi * 2/4, true);
Vous verrez que l'angle devient dans le sens antihoraire, ce qui fait que l'arc devient 360-90 = 270 degrés.
mais! Une chose à laquelle vous devez prêter attention est que la méthode de calcul du point de départ et le point final est toujours basée sur 0 degrés et s'étend dans le sens des aiguilles d'une montre, et il n'y a pas de dicton que le Cisco et le contraire sont vrai. Le sens antihoraire est juste la direction de l'arc.
Cela empêche non seulement la confusion de faire des allers-retours, mais facilite également le calcul.
Cependant, une utilisation flexible des dans le sens antihoraire est parfois utile.
Dans l'exemple ci-dessus, notre angle de départ est 0. Essayons maintenant d'autres angles de départ, tels que 90 degrés.
ctx.arc (400,400,20, math.pi * 2/4, math.pi * 2 + math.pi);
Si notre point de départ est de 90 degrés et que le point final est de 90 degrés, le résultat est que rien ne peut être dessiné, j'ai donc changé l'angle du point final à 180 degrés et j'ai finalement obtenu la figure sur la figure ci-dessous.
Question : Si nous dessions un cercle complet à partir d'un point de départ à non-0 degré, est-ce que ça va? Bien sûr, il est également possible, tant que vous définissez le point final de l'arc à 360 degrés + l'angle de départ, comme:ctx.arc (400,400,20, math.pi * 2/4, math.pi * 2 + math.pi * 2/4); // Le point de départ est de 90 degrés, le point final est de 360 + 90 degrés
Cependant, cette approche consiste purement une question de trouble sans problème, et les gens normaux ne l'utiliseront pas.
Résumé : La méthode d'arc de Canvas consiste à dessiner des arcs réguliers, et vous ne pouvez dessiner des arcs réguliers, et vous ne pouvez pas dessiner d'autres arcs étranges, tels que en forme de S - bien que j'aime le plus en forme de S.