Sigamos hablando sobre el método de dibujar curvas en lienzo. Hoy hablaré de QuadraticCurveto.
Para ser honesto, este método da un poco de miedo, primero puede experimentarlo desde el nombre de la función. Por cierto, creo que es necesario acortar este nombre de función.
Medios cuadráticos cuadráticos, es decir, la ecuación cuadrática cuadrática en matemáticas. Los parámetros de CTX.QuadraticCurveto son los siguientes:
ctx.quadraticCurveto (x1, y1, x, y);
¿Dónde X e Y son las coordenadas del punto final, y X1 e Y1 son las coordenadas del punto de control de la curva? ¿Qué? Me preguntas ¿dónde está el punto de partida? El punto de partida se determina usando Moveto antes de esto.
La razón por la que pongo las coordenadas del punto de control con el número de serie 1 es porque la función de las curvas de dibujo mencionadas más tarde tiene dos puntos de control, que son X2 e Y2, por lo que primero daré una vacunación aquí.
El punto de partida determinado por Moveto y el punto final determinado por QuadraticCurveto mismo se puede conectar a una línea recta. Dado que QuadraticCurveto tiene solo un punto de control, este punto de control está en el lado izquierdo de la línea o en el lado derecho de la línea, por lo que QuadraticCurveto solo puede dibujar arcos, pero aún no puede dibujar una línea en forma de S.
En aras de una fácil comprensión, continuaré utilizando el método de dibujar líneas auxiliares en el artículo anterior. El código preliminar es el siguiente:
var x1 = 350,
y1 = 250,
x = 400,
y = 500;
ctx.beginpath ();
ctx.Strokestyle = "#000";
CTX.moveto (300,300); // Punto de inicio
ctx.quadraticCurveto (x1, y1, x, y); // curva real
ctx.stroke ();
ctx.beginpath ();
CTX.StrokeStyle = "RGBA (255,0,0,0.5)";
CTX.moveto (300,300);
ctx.lineto (x1, y1); // Esta línea y la siguiente línea son las líneas que dibujan el punto de control
ctx.lineto (x, y);
ctx.moveto (300,300); // Los puntos iniciales y finales de los puntos de inicio y finalización de la curva
ctx.lineto (x, y);
ctx.stroke ();
Aquí he dibujado dos líneas auxiliares, una es la línea de conexión entre el punto de partida y el punto final, y la otra es la línea auxiliar entre el punto de partida y el punto de control y luego al punto final (en realidad dos). La intersección de estas dos líneas es la coordenada del punto de control de QuadraticCurveto.
QuadraticCurveto solo puede dibujar curvas en los arcos, pero este arco puede ser muy irregular, lo que también es una mejora en comparación con el arco y el arco.
Además, QuadraticCurveto no tendrá una inversión como Arcto.
Por supuesto, si tira el punto de control muy lejos, los gráficos pueden volverse irreconocibles para usted. Vamos a intentarlo:
y1 = 950;
Acabo de cambiar Y1 un poco más grande, y la curva fue más allá del rango de lienzo.
Sin embargo, el rango de curvas dibujadas por QuadraticCurveto nunca puede alcanzar o exceder las coordenadas del punto de control. Solo necesitamos controlar bien el punto de control, por lo que no tenemos que preocuparnos.
Escribí una página de ejemplo de movimiento simple que muestra el proceso de dibujo de curvas en QuadraticCurveto, con la esperanza de ayudarlo a profundizar su comprensión:
Por favor, sea más inclusivo si el código está escrito feo.