Tutorial de dibujo de lona HTML5 (8) - Método Beziercurveto para dibujar curvas en lienzo

En el artículo anterior, he hablado sobre tres formas de dibujar curvas en lienzo: arco, arco y cuadráticocurveto. Todos tienen una cosa en común, es decir, las curvas que dibujan solo pueden ser sesgadas a un lado. La mayor diferencia entre Beziercurveto mencionada hoy y son que tienen dos puntos de control, es decir, pueden dibujar una curva en forma de S.

Beziercurveto, que es la llamada curva de Bezier, si ha aprendido algunas herramientas de dibujo, puede entenderlo de inmediato.

ctx.beziercurveto (x1, y1, x2, y2, x, y); Explicaré sus parámetros como de costumbre. (x1, y1) es la coordenada del punto de control 1, (x2, y2) es la coordenada del punto de control 2, y (x, y) es la coordenada de su punto final. Al igual que QuadraticCurveto, sus coordenadas de punto de partida también están preestablecidas por Moveto.

Por lo tanto, Beziercurveto dibujar una curva requiere 4 puntos: punto de partida, punto final, punto de control 1, punto de control 2. Para la explicación posterior, aquí supongo que el punto de control 1 corresponde al punto de partida y al punto de control 2 corresponde al punto final

Aquí mencionaremos el viejo problema del dibujo de lienzo, lo que significa que el dibujo del código se basa en adivinar, y debe actualizar el dibujo para comprender dónde lo dibuja.

Continuaré la buena tradición anterior y dibujaré algunas líneas auxiliares para ayudar a todos a comprender:

var x1 = 450, // La coordenada x del punto de control 1

y1 = 300, // y del punto de control 1

x2 = 450, // x del punto de control 2

y2 = 500, // y del punto de control 2

x = 300, // Punto final x

y = 500; // Punto final Y

CTX.Moveto (300,300); // Punto de inicio

ctx.beginpath ();

ctx.linewidth = 5;

CTX.StrokeStyle = "RGBA (0,0,0,1)"

CTX.moveto (300,300);

ctx.beziercurveto (x1, y1, x2, y2, x, y);

ctx.stroke ();

// Comience a dibujar líneas auxiliares

ctx.beginpath ();

CTX.StrokeStyle = "RGBA (255,0,0,0.5)";

ctx.linewidth = 1;

// Conecte el punto de partida y el punto de control 1

CTX.moveto (300,300);

ctx.lineto (x1, y1);

// Conectar el punto final y el punto de control 2

ctx.moveto (x2, y2);

ctx.lineto (x, y);

// Conecte los puntos de inicio y finalización (línea de base)

CTX.moveto (300,300);

ctx.lineto (x, y);

ctx.stroke ();

Aquí primero dibujo una curva similar a QuadraticCurveto, que solo está sesgada a un lado. Esta línea parece ser relativamente redonda porque las coordenadas X de los puntos de control 1 y 2 son las mismas.

Ahora dibuja una curva en forma de S para demostrar que Beziercurveto es único:

var x1 = 150;

...

De hecho, simplemente cambie las coordenadas del punto de control 1. Si las coordenadas del punto de control 1 y el punto de control 2 están respectivamente en ambos lados de la línea de base, se dibuja una curva en forma de S; Si ambos están en un lado de la línea de base, es un efecto similar a QuadraticCurveto.

La situación de este ejemplo es relativamente simple. La línea de base (punto de partida a final del punto) es vertical, pero la mayoría de las veces en la aplicación real, nuestra línea de base es oblicua, por lo que la situación es mucho más complicada. Pero intentémoslo tú mismo

Cada método de dibujo parece relativamente único en función, pero el método potente se combina por un solo método. En el artículo posterior, intenté explicar algunos métodos de dibujo comunes, como rectángulos redondeados y elipses. Necesitaban combinar estos métodos individuales en el pasado.