HTML canvas createLinearGradient()Método
Objeto CanvasEjemplo
Define un gradiente de negro a blanco (de izquierda a derecha) como estilo de relleno del rectángulo:
JavaScript：
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);
Pruébalo »
Compatibilidad del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari admiten el método createLinearGradient().
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
Definición y uso
El método createLinearGradient() crea un objeto de gradiente lineal.
El gradiente se puede usar para rellenar rectángulos, círculos, líneas, texto, etc.
Consejo:Utilice este objeto comostrokeStyleofillStylevalor de la propiedad.
Consejo:Utilice eladdColorStop()método para especificar los diferentes colores y dónde ubicar los colores en el objeto gradient.
| Sintaxis de JavaScript: | context.createLinearGradient(x0,y0,x1,y1); |
|---|
Valores de parámetros
| Parámetro | Descripción |
|---|---|
| x0 | Coordenada x del punto de inicio del gradiente |
| y0 | Coordenada y del punto de inicio del gradiente |
| x1 | Coordenada x del punto final del gradiente |
| y1 | Coordenada y del punto final del gradiente |
Más ejemplos
Ejemplo
Define un gradiente (de arriba a abajo) como estilo de relleno del rectángulo:
JavaScript：
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);
Pruébalo »
Ejemplo
Define un gradiente de negro a rojo y luego a blanco, como estilo de relleno del rectángulo:
JavaScript：
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);
Pruébalo »
Otras extensiones