Gradientes de color

El gradiente de colores es un efecto de relleno que usa una transición entre varios colores en lugar de un color único.

El objeto gradiente se crea a partir del contexto de dibujo (lapiz en los ejemplos) con los métodos createLinearGradient(x0,y0,x1,y1) para los lineales y con el método createRAdialGradient(x0,y0,r0,x1,y1,r1) para los radiales o circulares.

Luego es necesario definir los colores que se usarán con el método addColorStop(pos, color). El primer parámetro, pos, tiene un valor ente 0.0 y 1.0 e indica la posición del color, que viene dado por el segundo parámetro. El color se puede expresar con nombre, código hexadecimal o las funciones RGB o RGBa, es decir, de la misma forma que se declara en CSS. De esta forma podemos crear gradientes multicolores

 

Gradiante radial

En el gradiente radial los colores van cambiando gradualmente desde un circulo central hacia el exterior. En este ejemplo se aplica a un círculo para que se vea más evidente y se usan tres colores para mostrar que puede ser un efecto multicolor.

<canvas width="600" height="300" id="mipanel"></canvas>

<script>

var miLienzo = document.getElementById("mipanel");

var lapiz = miLienzo.getContext("2d");

lapiz.beginPath();

lapiz.arc(300,150,80, 0, 2*Math.PI);

grad=lapiz.createRadialGradient(300,150,5,300, 150,80);

grad.addColorStop(0,"white");

grad.addColorStop(0.6,"#20A0AF");

grad.addColorStop(1, "RGB(255,0,0)");

lapiz.fillStyle=grad;

lapiz.fill();

lapiz.stroke();

</script>

El gradiente lineal se crea con createRadialGradient(x0,y0, r0, x1, y1, r1) que lleva seis parámetros para definir el centro y radio de los círculos donde empieza y termina el gradiente. Luego añadimos los colores como se explica en el apartado anterior. En este ejemplo los colores están descritos con tres métodos diferentes.

En el ejemplo el gradiente se centra en el mismo punto que el círculo, pero puede centrarse en cualquier otro punto dentro o fuera del círculo.

Gradiente lineal

En el gradiente lineal los colores cambian en un dirección (horizontal, vertical, inclinada). La forma la eliges con los parámetros del punto de inicio y final. En este ejemplo ves como se usa para rellenar un rectángulo. Puedes hacer cambios para ver los efectos al cambiar las coordenadas de los puntos que definen el gradiente.

<canvas width="600" height="300" id="mipanel"></canvas>

<script>

var miLienzo = document.getElementById("mipanel");

var lapiz = miLienzo.getContext("2d");

var grad=lapiz.createLinearGradient(0,0,200,0);

grad.addColorStop(0,"red");

grad.addColorStop(1,"white");

lapiz.fillStyle=grad;

lapiz.fillRect(10,10,150,80);

</script>

El gradiente lineal se crea con createLinearGradient(x0,y0,x1,y1) que lleva cuatro parámetros: (x0, y0) coordenadas del inicio del primer color y (x1, y1) coordenadas del último color del gradiente. Si y0 = y1 el gradiente es horizontal, pero si x0 = x1, entonces la variación de color va de arriba abajo.

Con otros valores de (x0,y0) y (x1, y1) consigues que el color cambie segun una linea inclinada.