Tutoriel de dessin sur toile html5 (5) : méthode d'arc pour dessiner des courbes dans les compétences du didacticiel canvas_html5

Dans cet article Dessiner des lignes sur toile, j'ai expliqué comment dessiner des lignes droites. Logiquement, cet article sur le dessin de courbes aurait dû être publié depuis longtemps, mais comme dessiner des courbes sur toile est assez particulier, je ne l'ai pas fait. Je ne l'ai pas encore compris, alors essayez-le étape par étape.
L'une des difficultés du dessin de courbes dans Canvas est qu'il n'y a que 4 fonctions pour les courbes ! Ce sont arc, arcTo, quadraticCurveTo et bezierCurveTo. Permettez-moi de commencer par la méthode d'arc la plus simple.
La fonction de l'arc est de tracer un arc régulier, qui peut être un cercle complet ou un certain arc de cercle. La syntaxe de arc est la suivante : 🎜>

context.arc(x, y, radius, startAngle, endAngle, antihoraire)
Je vais vous expliquer ses paramètres, c'est-à-dire
arc(centre du cercle x, centre du cercle y, rayon, angle de départ, angle de fin, dans le sens inverse des aiguilles d'une montre ou non)

Que devons-nous faire si nous utilisons l'arc pour dessiner un cercle complet ? Tout le monde a remarqué qu'il y a un angle de départ et un angle de fin dans les paramètres. Si notre angle de départ est de 0 et l'angle de fin est de 360, n'est-ce pas un cercle parfait ?

Bonne réponse ! Mais il convient de noter que l'angle est ici exprimé en « radians » (il en va de même pour Flash). Un cercle complet fait 360 degrés, soit 2PI radians. On écrit donc comme ceci :

Copiez le code


Le code est le suivant :


ctx.arc(400,400,20,0,Math.PI*2 ctx.fill(); >
Comme lineTo, arc est également un chemin de dessin, nous devons donc appeler la méthode de remplissage ou de trait derrière lui pour afficher les graphiques (le style de trait rouge et le style de remplissage rouge translucide sont utilisés dans l'image).

Traçons maintenant un 1/4 de cercle, l'angle est de 90 degrés. Comme mentionné précédemment, un angle de 360 ​​degrés est de 2PI radians, donc un angle d'un degré est de 2PI/360=PI/180 radians, puis 90 degrés est de 2PI/360*90=PI/2 radians (veuillez calculer les autres angles par vous-même. ).

Copier le code


Le code est le suivant :

ctx.arc(400,400, 20,0 ,Math.PI*2/4);

À partir de la figure, nous pouvons déterminer que 0 degré d'arc est 0 degré couramment utilisé en mathématiques , mais l'angle par défaut est L'aiguille des heures est ouverte, ce qui est opposé au modèle mathématique (il est lié aux coordonnées, car les coordonnées du canevas sont également opposées aux coordonnées mathématiques).

Mais n'y a-t-il pas un paramètre devant pour déterminer si c'est dans le sens inverse des aiguilles d'une montre ? Et si on le mettait à vrai ?

Copier le code

Le code est le suivant :

ctx.arc(400,400, 20,0 ,Math.PI*2/4,true);




Vous verrez que l'angle devient dans le sens inverse des aiguilles d'une montre, ce qui fait que l'arc devient 360 -90. =270 degrés.

Mais ! Une chose à laquelle tout le monde devrait prêter attention est que la méthode de calcul du point de départ et du point final commence toujours à partir de 0 degré et s'étend dans le sens des aiguilles d'une montre. Il n'y a pas d'avant et d'arrière. Dans le sens horaire et antihoraire ne sont que les directions dans lesquelles les arcs sont dessinés.

Cela évite non seulement les allers-retours de confusion, mais facilite également les calculs. Cependant, une utilisation flexible dans le sens inverse des aiguilles d'une montre peut parfois être utile. Dans l'exemple ci-dessus, nos angles de départ sont tous 0. Essayons maintenant d'autres angles de départ, tels que 90 degrés.

Copier le code

Le code est le suivant :

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 également de 90 degrés, le résultat est que rien peut être dessiné, j'ai donc mis le point final. L'angle a été modifié à 180 degrés, et finalement le graphique ci-dessous a été obtenu.

Question : Si on trace un cercle complet à partir d'un point de départ autre que 0 degré, est-ce que ça va ? Bien sûr, vous pouvez, à condition de définir le point final de l'arc sur l'angle de départ de 360 ​​degrés, comme :

Copier le code

Codez comme suit :

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 ne fait que chercher les ennuis, et les gens normaux ne l'utiliseraient pas.
Résumé : La méthode de l'arc de Canvas est un moyen de dessiner un arc positif. Elle ne peut dessiner que des arcs positifs et ne peut pas dessiner d'autres arcs étranges, tels que la forme en S - même si je préfère celui-ci. -en forme.