L'article précédent a parlé de la méthode ARC de Canvas, et cet article a parlé de la méthode Arcto qui lui est liée.
Arc et Arcto peuvent être vus à partir des noms. Arcto est également une méthode de dessin de courbes, et la courbe qu'il tire est également un arc d'un cercle parfait. Mais ses paramètres et arc sont tout simplement hors de propos ~
ctx.arcto (x1, y1, x2, y2, rayon); Les paramètres ARCTO incluent deux points, et il est inutile de représenter le centre du cercle dans ces deux points. Seul le dernier paramètre est le rayon du cercle, indiquant qu'Arcto et le cercle ont un peu de relation.
Il y a très peu d'articles sur Arcto en ligne, et j'en ai finalement trouvé un qui était un étranger; Et il n'y a pas d'outil intuitif pour le dessin en toile, donc je ne peux que deviner, Arcto m'a fait deviner pendant longtemps. .
Pour une description intuitive, j'ai pris une méthode auxiliaire: partout où Arcto est dessiné, j'ai utilisé Lineto pour dessiner les points correspondants pour voir leur relation. Tracez simplement les lignes auxiliaires.
var x0 = 100,
y0 = 400,
x1 = 500,
y1 = 400,
x2 = 450,
y2 = 450;
ctx.beginPath ();
ctx.moveto (x0, y0);
ctx.strokestyle = "# f00";
ctx.linewidth = 2;
ctx.arcto (x1, y1, x2, y2,20);
ctx.stroke ();
ctx.beginPath ();
ctx.strokestyle = "rgba (0,0,0,0,5)";
ctx.linewidth = 1;
ctx.moveto (x0, y0);
ctx.lineto (x1, y1);
ctx.fillText ('x1, y1', x1 + 10, y1 + 10)
ctx.lineto (x2, y2);
ctx.fillText ('x2, y2', x2 + 10, y2)
ctx.stroke ();
Il semble qu'il y ait beaucoup de code, mais c'est en fait très simple. J'ai utilisé plusieurs variables pour enregistrer les valeurs de coordonnées et les autres étaient des opérations de toile.
Description variable: x0, y0 est la coordonnée du point de départ, x1, y1 est la première coordonnée ponctuelle, et x2, y2 est la deuxième coordonnée ponctuelle. La ligne droite tracée par Lineto est une ligne noire translucide 1px, et la ligne tracée par Arcto est une ligne rouge 2px.
Actualisez la page et vous verrez l'image ci-dessous.
Je dois dire que cette ligne rouge ressemble à un crochet.
La loi d'Arcto a donc été trouvée. Il a en fait formé un angle à travers les deux lignes droites au point de départ, le point 1 et le point 2, et ces deux lignes sont également les lignes tangentes du cercle du paramètre.
Le rayon du cercle détermine où le cercle se clignera les bords avec la ligne. C’est comme une balle qui roule dans un coin mort. Plus la balle est petite, plus elle roule, plus elle se rapproche du coin mort; Plus la balle est grande, le contraire est vrai.
C'est un problème académique très grave, alors ne voulez pas yy.
Afongeons le ballon plus grand!
ctx.arcto (x1, y1, x2, y2,50); // Le rayon est changé à 50
Comme le montre la figure, vous pouvez voir que l'arc est devenu grand et n'est même pas tangent à la ligne droite.
Bien sûr, ils sont en fait toujours tangents parce que la tangente est infiniment étendue.
Nous continuons d'explorer, de continuer à développer le cercle et à raccourcir la distance entre le point de départ et le premier point.
var x0 = 400; // Le point de départ x change les coordonnées de 100 à 400
...
ctx.arcto (x1, y1, x2, y2,100); // Le rayon du cercle devient plus grand à 100 et vous verrez une figure aussi étrange.
C'était à l'origine un crochet, mais maintenant il a été plié et s'est tourné vers la direction opposée! C'est un peu comme un support de bouteille de vin.
Cependant, veuillez noter que ce cercle est toujours tangent aux deux lignes! Mais maintenant, la longueur des deux lignes ne peut pas satisfaire ce cercle! Il a étendu les deux fils sans fil!
Quand cette poignée de crochet sera-t-elle inversée? Si vous avez une bonne géométrie, vous pouvez essayer de comprendre les équations tangents des points et des cercles.
Il y a un point très important dans la méthode Arcto. Ce point important est (x1, y1) dans le code. Tant que la distance de celui-ci au point tangent du cercle dépasse la distance de celui-ci au point de départ (x0, y0), il inversera.
D'après la figure, nous pouvons voir que les coordonnées de ce point (x2, y2) peuvent changer infiniment. Tant que c'est toujours un point sur la tangente, le graphique dessiné par Arcto ne changera pas du tout lorsque le rayon du cercle reste inchangé. Cela nécessite une attention particulière.
Permettez-moi d'utiliser mes connaissances géométriques que je ne peux pas obtenir sur la table pour vérifier cette proposition. Par souci de calcul, j'ai d'abord changé l'angle entre les deux lignes à 90 degrés.
var x0 = 100,
y0 = 400,
x1 = 500,
y1 = 400,
x2 = 500,
y2 = 450;
Après le changement, il sera ouvert à 90 degrés! Nous gardons le rayon de la balle inchangé. Après rafraîchissement:
Nous agrandissons Y2, c'est-à-dire étendre une ligne tangente, le transformer en 550 et actualiser:
La ligne tangente est étendue, mais la ligne rouge tracée par Arcto n'a pas du tout changé.