El segundo caso de uso de fillStyle es el relleno degradado. Los colores degradados se dividen en colores degradados lineales y colores degradados radiales.
Degradado lineal: dividido aproximadamente en dos pasos, aquí se utilizarán dos nuevas funciones de lienzo.
Paso 1: utilice una nueva función createLinearGradient(xstart,ystart,xend,yend);var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
Tiene cuatro parámetros. Son, respectivamente, xstart, ystart, xend y yend, que forman dos coordenadas, y estas dos coordenadas forman un segmento de línea. Este segmento de línea es en realidad una línea de gradiente. Las líneas de degradado se utilizan para definir la dirección y la escala del degradado.
El segundo paso: agregue colorStop según esta línea de degradado. Este método se llama addColorStop (detener, color). Tiene dos parámetros: parada y color. El primer parámetro es un valor de punto flotante que se utiliza para determinar la posición del color clave. El segundo parámetro se utiliza para determinar el color del color clave. linearGrad.addColorStop(parada,color);
Después de completar estos dos pasos, la variable linearGrad se puede pasar a este atributo como fillStyle.
Mira el código:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=es decir=edge> <title>Gradiente lineal</title></head><body> <canvas id=canvas style=border: 1px sólido #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas.width = 800); ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); //Obtener el entorno de dibujo de contexto var linearGrad = context.createLinearGradient(0, 0, 800, 600); //La coordenada inicial de la línea de gradiente es (0,0) y la coordenada final es (800,600) linearGrad.addColorStop(0.0, '#000'); El primero El parámetro representa la posición del color de la clave. 0 representa la posición inicial, 1 representa la posición final y el segundo parámetro representa el color del color de la clave. linearGrad.addColorStop(1.0, '#fff'); context.fillStyle = linearGrad; context.fillRect(0, 0, 800, 600); else { alert('Su navegador no admite lienzo, intente cambiar el navegador ~ ') } }</script>Representación:
Después de crear la variable linearGrad, podemos agregarColorStop y agregar muchos.
Por ejemplo:
Código:
var linearGrad = context.createLinearGradient(0, 0, 800, 600); //La coordenada inicial de la línea de gradiente es (0,0) y la coordenada final es (800,600) linearGrad.addColorStop(0.0, '#fff') ; linealGrad.addColorStop(0.25, '#FB3'); '#690'); linealGrad.addColorStop(0.75, '#09C'); linealGrad.addColorStop(1.0, '#000');
Representación:
Además, la línea de degradado que definimos está inclinada y también podemos definirla como horizontal o vertical. Solo necesitamos modificar las coordenadas finales de la línea de gradiente. Mira el código para hacer un degradado horizontal:
var linearGrad = contexto.createLinearGradient(0, 0, 800, 0);
Representación:
Color degradado vertical:
var linearGrad = contexto.createLinearGradient(0, 0, 800, 0);
Representación:
No importa si está inclinado horizontal o verticalmente, lo que hacemos recorre todo el lienzo. Entonces, ¿cuál será el efecto si nuestra línea de degradado solo se asigna a una parte del lienzo? vamos a modificarlo
var linearGrad = contexto.createLinearGradient(0, 0, 400, 300);
Representación:
De la misma forma, la línea de degradado que creamos también puede exceder el ancho y alto máximo de este lienzo. vamos a modificarlo
var linearGrad = contexto.createLinearGradient(-200, -100, 1000, 800);
Representación:
Además, es posible que las formas rellenas que dibujamos no necesariamente ocupen todo el lienzo. Podemos ajustar la forma que definimos arbitrariamente. Esta forma rellena encontrará el color de relleno apropiado en la línea de degradado que definimos y la completará. Por ejemplo:
var linearGrad = contexto.createLinearGradient(-200, -100, 1000, 800);
Representación:
Degradado radial: la diferencia con el degradado lineal es que el degradado radial define un degradado radial. Este gradiente radial se define sobre la base de dos círculos concéntricos. A diferencia de un gradiente lineal que se define entre dos puntos.
Los gradientes radiales también requieren dos pasos para completarse.
Paso 1: utilice una nueva función createRadialGradient(x0,y0,r0,x1,y1,r1); tiene 6 parámetros. Los primeros tres parámetros definen las coordenadas y el radio del primer anillo, y los últimos tres parámetros definen las coordenadas y el radio del segundo anillo. Todo el gradiente radial se produce entre estos dos círculos. var radialGrad = contexto.createRadialGradient(x0,y0,r0,x1,y1,r1);
Paso 2: Es lo mismo que el degradado lineal, por lo que no lo presentaré en detalle. radialGrad.addColorStop(parada,color);
El código es muy similar al código de gradientes lineales. Es solo que aquí se usa createRadialGradient. Pasamos los parámetros createRadialGradient(300,300,0,300,300,500). Los primeros tres parámetros definen un punto con un radio de 0 en el centro del lienzo. Los últimos tres parámetros definen un círculo grande con un radio de 500 en el centro del lienzo. Esto define un gradiente radial que irradia hacia afuera desde un punto. Echa un vistazo al código
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=es decir=edge> <title>Gradiente radial</title></head><body> <canvas id=canvas style=border: 1px sólido #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas.width = 600); ; lienzo.altura = 600; if (canvas.getContext(2d)) { var contexto = lienzo.getContext(2d); context.createRadialGradient(300, 300, 0, 300, 300, 500); radialGrad.addColorStop(0.0, '#fff'); radialGrad.addColorStop(0.25, '#FB3'); '); radialGrad.addColorStop(0.75, '#09C'); radialGrad.addColorStop(1.0, '#000'); context.fillStyle = radialGrad; Su navegador no soporta lienzo, intente cambiar su navegador~') } }</script>Representación:
Puede intentar cambiar los parámetros para ver qué efectos diferentes habrá.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.