createLinearGradient tela HTML () Método
HTML Manual de lona Referência
Exemplos
Definição de gradiente de preto para branco (esquerda para a direita), um estilo de retângulo de preenchimento:
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);
tente »
Suporte a navegadores
Internet Explorer 9, Firefox, Opera, Chrome e Safari apoio createLinearGradient () método.
Nota: 8 e versões anteriores do Internet Explorer não suportam o elemento <canvas>.
Definição e Uso
createLinearGradient () método cria um objeto gradiente linear.
Gradiente pode ser usado para preencher rectângulos, círculos, linhas de texto, e assim por diante.
Dica: Utilize este objeto como strokeStyle ou fillStyle valor da propriedade.
Dica: Use addColorStop () método especifica uma cor diferente, bem como onde localizar o objeto gradiente de cor.
| sintaxe JavaScript: | contexto .createLinearGradient (x0, y0, x1, y1); |
|---|
parâmetro Valor
| 参数 | 描述 |
|---|---|
| x0 | 渐变开始点的 x 坐标 |
| y0 | 渐变开始点的 y 坐标 |
| x1 | 渐变结束点的 x 坐标 |
| y1 | 渐变结束点的 y 坐标 |
mais exemplos
Exemplos
Definir um gradiente (cima para baixo) como um estilo de retângulo de preenchimento:
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);
tente »
Exemplos
Definir um de preto para vermelho e, em seguida, ao inclinação branco, um estilo de retângulo de preenchimento:
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);
tente »
HTML Manual de lona Referência