Los últimos tutoriales de desarrollo web
 

HTML canvas createLinearGradient() Method

<Objeto Canvas

Ejemplo

Definir un gradiente (left to right) que va desde el negro al blanco, como el estilo de relleno para el rectángulo:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Inténtalo tú mismo "

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.

Método
createLinearGradient() 4.0 9.0 3.6 4.0 10.1

Definición y Uso

El createLinearGradient() método crea un objeto de gradiente lineal.

El gradiente puede utilizarse para llenar rectángulos, círculos, líneas, texto, etc.

Tip: Utilice este objeto como el valor de los strokeStyle o fillStyle propiedades.

Tip: Utilice la addColorStop() método para especificar diferentes colores, y dónde colocar los colores en el objeto de gradiente.

la sintaxis de JavaScript: context . createLinearGradient( x0,y0,x1,y1 ) ;

Los valores de los parámetros

Parámetro Descripción
x0 La coordenada x del punto de inicio del gradiente
y0 La coordenada y del punto de inicio del gradiente
x1 La coordenada x del punto final del gradiente
y1 La coordenada y del punto final del gradiente

Ejemplos

Más ejemplos

Ejemplo

Definir un gradiente (top to bottom) como el estilo de relleno para el rectángulo:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Inténtalo tú mismo "

Ejemplo

Definir un gradiente que va de negro, al rojo, al blanco, como el estilo de relleno para el rectángulo:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Inténtalo tú mismo "

<Objeto Canvas