createLinearGradient lienzo HTML método ()
Ejemplos
Definición de negro a blanco gradiente (de izquierda a derecha), un estilo de relleno 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);
Trate »
Soporte para el navegador
Internet Explorer 9, el método de Firefox, Opera, Chrome y Safari createLinearGradient apoyo ().
Nota: 8 y versiones anteriores de Internet Explorer no son compatibles con el elemento <canvas>.
Definición y Uso
createLinearGradient método () crea un objeto gradiente lineal.
Gradiente puede utilizarse para rellenar rectángulos, círculos, líneas, texto, y así sucesivamente.
Consejo: Utilice este objeto como strokeStyle o fillStyle valor de la propiedad.
Consejo: Utilice addColorStop () método especifica un color diferente, así como dónde ubicar el objeto degradado de color.
| la sintaxis de JavaScript: | contexto .createLinearGradient (x0, y0, x1, y1); |
|---|
parámetro Valor
| 参数 | 描述 |
|---|---|
| x0 | 渐变开始点的 x 坐标 |
| y0 | 渐变开始点的 y 坐标 |
| x1 | 渐变结束点的 x 坐标 |
| y1 | 渐变结束点的 y 坐标 |
más ejemplos
Ejemplos
Definir un gradiente (de arriba abajo) como un estilo de relleno 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);
Trate »
Ejemplos
Definir una de negro a rojo y luego a un gradiente de blanco, un estilo de relleno 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);
Trate »