Gradiente lineal
El gradiente lineal se puede utilizar como relleno para formas geométricas, líneas y texto dentro del <canvas>.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| createLinearGradient() | context.createLinearGradient(x0,y0,x1,y1); | Crea un gradiente lineal para utilizar en el <canvas>x0,y0 son las coordenadas del punto donde empieza el gradiente. x1,y1 son las coordenadas del punto donde acaba el gradiente. |
|
| addColorStop() | gradient.addColorStop(stop,color); | Especifica los colores y la posición donde para el gradiente. | |
| fillStyle | context.fillStyle = color | gradiente | patrón; | Determina o devuelve el color, gradiente o patrón del relleno. | negro |
| fill() | context.fill(); | Rellena una forma geométrica. | black |
Vea la chuleta con las propiedades y metodos() de canvas.
Los gradientes lineales son definidos por una línea imaginaria que nos da la dirección del gradiente.
El método createLinearGradient(x0,y0,x1,y1) toma cuatro argumentos.
Los primeros dos argumentos (x0,y0) representan las coordenadas del origen de nuestra línea, mientras que los siguientes dos
argumentos (x1,y1) representan las coordenadas del punto donde esta línea acaba.
El método addColorStop(stop,color) toma dos argumentos.
El primer argumento, stop, puede tomar valores desde 0.0 hasta 1.0, y representa una posición a lo largo del vector gradiente definido anteriormente con método createLinearGradient().
Podemos utilizar el método addColorStop() tantas veces como creamos necesario.
El segundo argumento representa el color, que puede tomar cualquier valor aceptado en el CSS
( nombres de colores, valores
hex, rgb, rgba,
hsl, hsla).
Veamos un ejemplo. A continuación queremos dibujar un rectángulo que cubrirá todo el lienzo, desde la esquina izquierda arriba ( x = 0, y = 0 ) hasta la esquina derecha abajo ( x = canvas.width, y = canvas.height ).
Utilizando el método createLinearGradient() creamos el vector gradiente, estableciendo el punto de partida del vector ( x0 = 0, y0 = 0 ), y el punto donde este acaba ( x1 = canvas.width, y1 = 0 ).
Este es un gradiente lineal horizontal, ya que el vector es paralelo al eje x.
Utilizamos el método addColorStop() seis veces para crear algo parecido a un arco iris.
Al final utilizamos este gradiente como estilo de relleno (ctx.fillStyle = grd;) para nuestro rectángulo.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
ctx.rect(0, 0, canvas.width, canvas.height);
// crea un gradiente lineal horizontal
var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
grd.addColorStop(0,"black");
grd.addColorStop("0.2","magenta");
grd.addColorStop("0.4","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle = grd;
ctx.fill();
}
}