HTML5 Animación de Canvas

HTML5 Desvanecimiento de Canvas

HTML5 El desvanecimiento de Canvas es un patrón de color que se puede usar como relleno o trazo de forma, en lugar de un color puro. El desvanecimiento es un patrón de color que cambia de un color a otro. El desvanecimiento tiene dos tipos: Linear（lineal）y Radial（radial）

El desvanecimiento de Canvas es un patrón de color que se puede usar como relleno o trazo de forma, en lugar de un color puro. El desvanecimiento es un patrón de color que cambia de un color a otro. Aquí hay algunos ejemplos para ilustrar mi punto:

1. Hay dos tipos de desvanecimientos:

2. Linear（lineal）

Radial（radial）
Desvanecimiento lineal utiliza patrones lineales horizontales, verticales o diagonales para cambiar los colores.
Desvanecimiento radial

Dos tipos de desvanecimientos se introducen en este documento.

desvanecimiento lineal2Como se mencionó anteriormente, el desvanecimiento lineal utiliza un patrón lineal para cambiar los colores. Utilice

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
　　　　
var x1　=　　　0;
var y1　=　　　0;
var x2　=　100;
var y2　=　　　0;
var linearGradient1　=　context.createLinearGradient(x1,　y1,　x2,　y2);

D el contexto de la función crear desvanecimiento lineal createLinearGradient(). Este es un ejemplo:4La función createLinearGradient() adopta1, y1los parámetros: x2, y2，x4. Esto1, y1los parámetros determinan la dirección y la extensión del patrón de desvanecimiento. La gradiente comienza en el primer punto x2, y2se extiende al segundo punto x
. Esto1y x2）como se muestra a continuación:

　　　　var x1　=　　　0;
　　　　var y1　=　　　0;　　　　var　x2　=　100;
　　　　var y2　=　　　0;
　　　　var linearGradient1　=　context.createLinearGradient(x1,　y1,　x2,　y2);

Para crear un desvanecimiento horizontal, se cambia únicamente el valor del parámetro en el eje y (para y1y2）para crear un desvanecimiento vertical, como se muestra a continuación:

　　　　var x1　=　　　0;　　　　var　y1　=　　　0;
　　　　var x2　=　　　0;　　　　var　y2　=　100;
　　　　var linearGradient1　=　context.createLinearGradient(x1,　y1,　x2,　y2);

Para crear un desvanecimiento diagonal, se crea un desvanecimiento a través de la modificación simultánea de los parámetros de eje x e y. Este es un ejemplo:

　　　　var x1　=　　　0;
　　　　var y1　=　　　0;
　　　　var x2　=　100;
　　　　var y2　=　100;
　　　　var linearGradient1　=　context.createLinearGradient(x1,　y1,　x2,　y2);

parada de color

El ejemplo anterior no muestra los colores del desvanecimiento. Para configurar los colores del desvanecimiento, se puede usar la función addColorStop() en el objeto de desvanecimiento. Este es un ejemplo:

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(1,　'rgb(　　0,　0,　0)');

La función addColorStop() tiene2un parámetro. El primer parámetro está entre 0 y1entre los números. Este número indica la distancia en la que se colocará el marcador de color en el área de desvanecimiento. El segundo parámetro es el color en sí. Tenga en cuenta cómo este ejemplo utiliza la notación de color rbg(red, green, blue), donde cada componente rojo/verde/el valor azul puede ser de 0 a255entre los números (con1un byte representa).
El ejemplo anterior añade dos marcadores de color. El primero es rojo, configurado para comenzar en el punto de partida del desvanecimiento (el primer valor de parámetro es 0). El segundo color es negro, configurado para estar en el final del área de desvanecimiento (el primer parámetro es1）。
Puede agregar más de dos puntos de color a la gradiente. Este es un ejemplo con3ejemplo de puntos de color:

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255);
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　0)');

Este ejemplo agrega un azul en el medio de la gradiente. Por lo tanto, la gradiente pasará suavemente de rojo a azul y luego a negro.

Usar la gradiente como estilo de relleno o trazo

Puede usar la gradiente como estilo de relleno o trazo.2Diferentes context.fillStyle o strokeStyle propiedades establecidas para apuntar al objeto de gradiente se puede completar esta operación. Este es un ejemplo:

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255);
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　0)');
context.fillStyle = linearGradient1;
context.strokeStyle = linearGradient1;

Ahora, puede usar la gradiente como color de relleno o contorno para dibujar. Este es un ejemplo de dibujar dos rectángulos-uno está relleno y el otro está contorneado (resumen):

<canvas id="ex2" width="500" height="125" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas no soportado
</canvas>
<script>
var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
var linearGradient1　= context.createLinearGradient(0,0,100,0);　//horizontal gradient
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　　　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255)');
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　　　0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10,100,　100);
var linearGradient2　= context.createLinearGradient(125,0,　225,0);　//horizontal gradient
linearGradient2.addColorStop(0　　,　'rgb(255,　0,　　　0)');
linearGradient2.addColorStop(0.5,　'rgb(　　0,　0,　255)');
linearGradient2.addColorStop(1　　,　'rgb(　　0,　0,　　　0)');
context.strokeStyle = linearGradient2;
context.strokeRect(125,　10,　100,　100);
</script>

Este es el resultado de dibujar en la lienzo:

rango de gradiente

Es importante entender el grado de la gradiente. Si la gradiente se extiende desde x = 10se extenderán a x = 110solo los valores de x entre10a110solo los gráficos dentro de esta área tendrán colores de gradiente aplicados. Los gráficos dibujados fuera de esta área aún se verán afectados por la gradiente, pero se dibujarán con el primer o último color de la gradiente.
Por ejemplo, supongamos que una gradiente se extiende desde x = 150 se extenderán a x =350. La transición será de azul a verde. Los valores de x menores que150 todos los gráficos dibujados se dibujarán en azul. Los valores de x mayores que350 todos los gráficos dibujados se dibujarán en verde. Solo los valores de x entre150 y35entre 0 y 0 entre los gráficos tendrá colores de gradiente.
Este es un ejemplo de código que utiliza la gradiente anterior para dibujar5un rectángulo para ilustrar esto

<canvas id="ex3" width="500" height="250" style="border:　1px sólido #cccccc;">
　　　　HTML5　Canvas no soportado
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var linearGradient1　= context.createLinearGradient(150, 0,　350,0);
linearGradient1.addColorStop(0,　'rgb(0,　0,　255)');
linearGradient1.addColorStop(1,　'rgb(0,　255, 0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10,130,　100);
context.fillRect(150,10,　200,　100);
context.fillRect(360,10,　130,　100);
context.fillRect(100,120,　150,　100);
context.fillRect(280,120,　150,　100);
</script>

Esto es el resultado de dibujar en el lienzo. Nota que solo los valores de x150 a350 entre los gráficos tienen colores de transición, mientras que el resto de los gráficos son completamente azules (primer punto de color) o completamente verdes (último punto de color).

Este ejemplo utiliza únicamente2colores, pero si se utilizan3colores, el efecto es el mismo. Fuera del área de transición, se utiliza únicamente el primer y último color de parada.
El grado de transición es importante para entender la forma correcta de colorear la forma. En muchos casos, es posible que deba definir una transición específica para cada forma para que se ajuste al área de dibujo.

Transición radial

La transición radial es un patrón circular que se extiende desde un color interno hacia uno o más colores externos. A continuación, se presentan algunos ejemplos gráficos:

La transición radial por2definición de círculo. Cada círculo tiene un punto central y un radio. Este es un ejemplo de código:

var x1　=　100;　　　//　x　of　1.　circle　center　point
var y1　=　100;　　　//　y　of　1.　circle　center　point
var r1　=　30;　　　　//　radio　of　1.　circle
var x2　=　100;　　　//　x　of　2.　circle　center　point
var y2　=　100;　　　//　y　of　2.　circle　center　point
var r2　=　100;　　　//　radio　of　2.　circle
var radialGradient1　= context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient1.addColorStop(0,　'rgb(0,　0,　255)');
radialGradient1.addColorStop(1,　'rgb(0,　255,　0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

Como puedes ver, se definen dos puntos centrales (x1, y1y x2, y2). Y definen dos radios (r1y r2). Estos se pasan como parámetros a createRadialGradient()2La función del contexto.
Deben definirse dos círculos con diferentes radios, por lo que causarán un círculo interno y uno externo (al menos en tamaño). Luego, los colores en la transición se extenderán desde el círculo interno al externo.
El funcionamiento de los puntos de color es similar al de la transición lineal. Definen qué colores se utilizarán en la transición y en qué posición del rango de transición se deben colocar esos colores.
Los puntos de color añadidos coincidirán en alguna posición entre los dos círculos. Por ejemplo, el primer parámetro 0 en el punto de parada del color indica que los colores comenzarán desde donde se encuentra el primer círculo. El primer parámetro1Representa que los colores comenzarán desde donde se encuentra el segundo círculo.
Esto es en HTML5El resultado del código de dibujo en el lienzo:

Si dos círculos tienen el mismo punto central, la transición será completamente circular y los colores se desvanecerán desde el círculo interno al externo. Si los puntos centrales de los dos círculos son diferentes, la transición será más parecida a una pirámide, como la luz proyectada de una lámpara (no perpendicularmente hacia la superficie). Este es un ejemplo de código similar a una pirámide:

var x1　=　100;
var y1　=　100;
var r1　=　30;
var x2　=　150;
var y2　=　125;
var r2　=　100;
var radialGradient1　= context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient1.addColorStop(0,　'rgb(0,　0,　255)');
radialGradient1.addColorStop(1,　'rgb(0,　255,　0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

Esta es la apariencia al dibujar una gradiente en el lienzo: