El artículo anterior habló sobre el método ARC del lienzo, y este artículo habló sobre el método Arcto relacionado con él.
Arc y Arcto se pueden ver a partir de los nombres de ellos. Arcto también es un método de curvas de dibujo, y la curva que dibuja también es un arco de un círculo perfecto. Pero sus parámetros y su arco son simplemente irrelevantes ~
CTX.Arcto (x1, y1, x2, y2, radio); Los parámetros de Arcto incluyen dos puntos, y no tiene sentido representar el centro del círculo en estos dos puntos. Solo el último parámetro es el radio del círculo, lo que indica que Arcto y el círculo tienen una pequeña relación.
Hay muy pocos artículos sobre Arcto Online, y finalmente encontré uno que era extranjero; Y no hay una herramienta intuitiva para el dibujo de lienzo, por lo que solo puedo adivinar, Arcto me hizo adivinar durante mucho tiempo. .
Para una descripción intuitiva, tomé un método auxiliar: donde sea que se dibuja Arcto, utilicé Lineto para dibujar los puntos correspondientes para ver su relación. Simplemente dibuje líneas auxiliares.
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 ();
Parece que hay mucho código, pero en realidad es muy simple. Utilicé varias variables para guardar valores de coordenadas, y el resto eran operaciones de lienzo.
Descripción de la variable: X0, Y0 es la coordenada del punto de partida, X1, Y1 es la coordenada del primer punto, y x2, Y2 es la coordenada del segundo punto. La línea recta dibujada por Lineto es una línea negra translúcida 1px, y la línea dibujada por Arcto es una línea roja de 2 px.
Actualice la página y verá la imagen a continuación.
Tengo que decir que esta línea roja parece un gancho.
Entonces se encontró la ley de Arcto. En realidad, formó un ángulo a través de las dos líneas rectas en el punto de partida, el punto 1 y el punto 2, y estas dos líneas también son las líneas tangentes del círculo de parámetros.
El radio del círculo determina dónde el círculo se escindirá los bordes con la línea. Es como una pelota rodando en una esquina muerta. Cuanto más pequeña sea la pelota, más se acerca, más se acerca a la esquina muerta; Cuanto más grande es la pelota, lo contrario es cierto.
Este es un problema académico muy serio, así que no quieras YY.
¡Hagamos la pelota más grande!
CTX.Arcto (x1, y1, x2, y2,50); // El radio se cambia a 50
Como se muestra en la figura, puede ver que el arco se ha vuelto grande y ni siquiera es tangente a la línea recta.
Por supuesto, en realidad todavía son tangentes porque la tangente se extiende infinitamente.
Continuamos explorando, continuamos haciendo crecer el círculo y acortando la distancia entre el punto de partida y el primer punto.
var x0 = 400; // La coordenada del punto x x cambia de 100 a 400
...
CTX.Arcto (x1, y1, x2, y2,100); // El radio del círculo se hace más grande a 100 y verá una figura tan extraña.
Originalmente era un gancho, ¡pero ahora se ha doblado y se ha vuelto a la dirección opuesta! Es un poco como un soporte de botella de vino.
Sin embargo, ¡tenga en cuenta que este círculo todavía es tangente a las dos líneas! ¡Pero ahora la longitud de las dos líneas no puede satisfacer este círculo! ¡Ha extendido ambos cables de forma inalámbrica!
¿Cuándo se revertirá este mango de gancho? Si tiene buena geometría, puede intentar comprender las ecuaciones tangentes de puntos y círculos.
Hay un punto muy importante en el método Arcto. Este punto importante es (x1, y1) en el código. Mientras la distancia desde él hasta el punto tangente del círculo exceda la distancia desde el punto de partida (x0, y0), se revertirá.
De la figura podemos ver que las coordenadas de este punto (x2, y2) pueden cambiar infinitamente. Siempre que siempre sea un punto en la tangente, entonces el gráfico dibujado por Arcto no cambiará en absoluto cuando el radio del círculo permanezca sin cambios. Esto requiere atención especial.
Permítanme usar mi conocimiento geométrico que no puedo conseguir sobre la mesa para verificar esta propuesta. En aras del cálculo, primero cambié el ángulo entre las dos líneas a 90 grados.
var x0 = 100,
y0 = 400,
x1 = 500,
y1 = 400,
x2 = 500,
y2 = 450;
¡Después del cambio, se abrirá 90 grados! Mantenemos el radio de la pelota sin cambios. Después de refrescarse:
Hacemos que Y2 sea más grande, es decir, extender una línea tangente, convertirlo en 550 y actualizar:
La línea tangente se extiende, pero la línea roja dibujada por Arcto no ha cambiado en absoluto.