Tutorial de dibujo de lona HTML5 (4) - Rutas no cerradas y métodos de llenado de color de gradiente

Hay dos métodos de dibujo generales, a saber, relleno y trazo. El artículo anterior ya ha hablado sobre los métodos de accidente cerebrovascular. Este artículo hablará sobre el método de llenar gráficos en lienzo.

Relleno () es muy sencillo? Y al igual que Strokestyle representa el estilo de accidente cerebrovascular, Fillstyle representa el estilo de relleno.

ctx.fillstyle = 'color'; El estilo de relleno predeterminado es opaco negro

Poder. El lienzo se conectará directamente al punto de partida desde el punto final de su ruta actual y luego la llenará. Como se muestra en la imagen:

Pero puedes encontrar que el último párrafo no tiene golpes.

Recuerdo que en nuestro artículo anterior dibujamos un cuadrado con 4 líneas, pero el lienzo no es tan malo, y ni siquiera hay una función para dibujar un rectángulo directamente. Puede usar Fillrect () para llenar directamente en un rectángulo:

ctx.fillrect (x, y, ancho, altura);

Aquí X e Y se refieren a las coordenadas del punto de partida de la esquina superior izquierda del rectángulo, recuerde.

Hablando de Fillrect, tenemos que mencionar Strokerect. Lo adivinaste bien, significa acariciar directamente un rectángulo.

También hay Filltext y StrokEtext. En cuanto a la función, es posible que lo haya adivinado. No hablaré de eso aquí, para que todos lo examinarán primero.

En el lienzo, los colores de gradiente también se dividen en dos tipos, a saber, gradiente lineal y gradiente radial, y el método de crearlos también es independiente. Primero veamos cómo crear gradientes lineales.

Crear gradiente lineal = CreateLineArgradient - Mira, todavía palabras muy directas. Su sintaxis es la siguiente:

¡CreateLineArgradient (x1, y1, x2, y2) tiene 4 parámetros! Parece muy complicado, pero de hecho esto es bastante simple, porque ya hemos dicho que el mundo de un avión está determinado por la coordenada X y la coordenada Y. Por lo tanto, X1, Y1 representa las coordenadas del punto de partida de un gradiente lineal, y x2, Y2 representa las coordenadas del punto final.

Los beneficios de hacer esto son obvios, y es conveniente si queremos crear un gradiente lineal oblicuo. Pero intentemos crear primero un gradiente lineal horizontal.

var lineal = ctx.createLineArGradient (100,100,200,100); El gradiente parece ser creado, entonces, ¿podemos llenarlo? -Este gradiente está vacío y no tiene color.

El método para agregar color a la barra de gradiente es addColorStop (posición, color). Pero tenga en cuenta que este addcolorstop no se agrega al pincel, sino a la variable que guarda el gradiente al frente. Estoy lineal aquí.

var lineal = ctx.createLineArGradient (100,100,200,100);

lineal.addcolorStop (0, '#fff');

lineal.addcolorstop (0.5, '#f0f');

lineal.addcolorstop (1, '#333');

Utilicé 3 addColorStops aquí, lo que significa agregar 3 colores a la barra de gradiente.

En este momento, podemos completar el color de gradiente, pero primero debemos asignar el gradiente definido para llenar el estilo.

var lineal = ctx.createLineArGradient (100,100,200,100);

lineal.addcolorStop (0, '#fff');

lineal.addcolorstop (0.5, '#f0f');

lineal.addcolorstop (1, '#333');

ctx.fillstyle = lineal; // Asignar gradiente para llenar el estilo

CTX.FillRect (100,100,100,100);

ctx.stroke ();

Tenga en cuenta que Fillrect y Strokerect dibujan rutas independientes. Por ejemplo, en el código anterior, la carrera se llama después de Fillrect, y el rectángulo acaba de dibujar no será acariciado. Lo mismo es cierto para Strokerect.

Después de la prueba, encontré un problema muy doloroso, es decir, las coordenadas de los gradientes lineales son relativos a toda la gama de lienzos. Por ejemplo, aquí, mi gradiente lineal comienza en 100,100. Si dibujo un rectángulo a 0,0 y lo lleno con este gradiente, encontraré que no hay relleno, porque el rango de mi gradiente simplemente excede el rango del rectángulo.

Esta es realmente una configuración de estafa.

reunión. El color antes del punto de partida es el color del punto de partida, y el color después del punto final es siempre el color del punto final.

Cómo terminar el color del punto final, puede completar un color final transparente después del color final. como:

lineal.addcolorstop (0.99, '#333');

lineal.addcolorstop (1, 'rgba (51,51,51,0)');

Según el plan anterior, intentaré construir otro gradiente lineal inclinado. Simplemente cambie los parámetros de CreateLineArgradient.

var lineal = ctx.createLineArGradient (100,100,200,200);

El efecto se muestra en la imagen:

Luego, probemos los gradientes radiales (gradientes circulares). Similar a CreateLinealGradient, el método para crear gradientes radiales es: CreateradialGradient, pero sus parámetros pueden ser muy diferentes:

Createradialgradient (x1, y1, r1, x2, y2, r2) en el que x1, y1, x2, y2 todavía representa el punto de partida y el punto final, pero el punto de partida y el punto final aquí son un círculo, y x, y son las coordenadas del centro del círculo. Por lo tanto, R1 y R2 son el radio del círculo de punto de partida y el radio del círculo de punto final, respectivamente. Como se muestra en la imagen:

En mi impresión, parece que el gradiente radial es un círculo, el centro del círculo es el punto de partida y el radio del círculo es el punto final. Pero el gradiente radial en el lienzo es realmente diferente. El punto de partida es un círculo y el punto final es un círculo, que es diferente de mi comprensión.

Comencemos con el más simple. Primero, haga un gradiente radial muy regular, es decir, el centro del círculo de gradiente es el punto de partida del gradiente. Debido al gradiente radial regular, el centro es el centro del círculo, debemos tratar de evitar sesgar. Entonces, ¿superpongamos el centro del círculo final con el centro del círculo inicial?

var radial = ctx.createradialgradient (55,55,10,55,55,55); // Coordenadas centrales correspondientes

radial.addcolorstop (0, '#fff');

radial.addcolorstop (0.5, '#ff0');

radial.addcolorstop (0.9, '#555');

radial.addcolorstop (1, '#f00');

El círculo de punto de partida de gradiente radial y las coordenadas del centro del círculo final que configuré aquí son los mismos, mientras que el radio del círculo de punto de partida es 10 y el radio del círculo de punto final es 55. El último rango de gradiente radial dibujado es un círculo con un ancho y altura de 110, lo que indica que el rango de gradiente se basa en el rango del círculo de punto final.

(Puede ver que todavía hay color fuera del rango del círculo final, y este color es el color final. Sin embargo, si intenta usar radial.addcolorstop (1.5, '#0f0'); para definir colores fuera del rango de gradiente, aún recibirá un error).

Entonces, ¿cuál es el uso del radio del círculo de punto de partida? - El centro del gradiente radial normal (llamémoslo el cambio de corazón ...) es solo un punto, no un círculo. En realidad, tenemos razón. Este círculo de punto de partida es como un punto, pero puede ser relativamente grande.

Hagamos que el radio del círculo inicial sea muy grande, cerca del radio del círculo final:

var radial = ctx.createradialgradient (55,55,50,55,55,55); // muy cerca

Los otros ColorStops permanecen sin cambios, y luego los gráficos se vuelven así.

En otras palabras, el color inicial del gradiente radial en el lienzo se extrae desde fuera del rango del círculo inicial, y todo el color del círculo inicial es el color inicial.

Establezcamos el radio del círculo de punto de partida en 0, y el cambio de centro de gradiente radial es realmente un punto.

La mayoría de las veces, no necesitamos un gradiente radial muy formal, sino que esperamos que su cambio de corazón sea compensado, similar a la figura a continuación:

En este momento, surge la ventaja de los dos círculos del gradiente radial del lienzo. Mientras el centro del círculo de punto de partida y el círculo de punto final no se superpongan, el cambio de corazón también cambiará:

var radial = ctx.createradialgradient (75,75,0,55,55,55); Pero el rango de gradiente en este momento sigue siendo el rango del círculo final.

Muchas personas nacen con una mentalidad de destrucción. Por ejemplo, aquí, el radio del círculo final siempre es más grande que el círculo inicial, pero ¿qué sucede si se invierten?

var radial = ctx.createradialgradient (75,75,55,55,55,0);

Después de las pruebas, no habrá errores, pero el gradiente original desde el interior hasta el exterior se ha convertido en un gradiente desde el exterior hasta el interior. Esta es una buena manera de usarlo.

Hay otro problema. Si cambiamos el centro del círculo inicial y el rango del círculo inicial excede el rango del círculo final,

¿Qué pasa en este momento?

¡Ah! ? ¿Cuál es la situación? !

Esta situación ocurre cuando el círculo inicial y el círculo final solo se superponen parcialmente. Por lo tanto, si necesita gradientes radiales normales, asegúrese de que uno de los círculos adjunte por completo el otro.

Además, dado que el gradiente se puede asignar al estilo FillStyle, también se puede asignar a Strokestyle. Conoces el efecto.