Manual de Referência HTML

大全 de etiquetas HTML

Método createLinearGradient() do HTML canvas

O método createLinearGradient() cria uma gradiente linear ao longo da linha de coordenadas especificadas pelo parâmetro. Este método retorna um objeto CanvasGradient linear.

Manual de referência do canvas do HTML

Exemplo online

Defina uma transição de vermelho para branco (de esquerda para direita) como estilo de preenchimento retangular:

Demonstração do uso do método createLinearGradient():

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do método createLinearGradient() no HTML canvas (Tutoriais Básicos Web　oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0, "vermelho");
grd.addColorStop(1,"branco");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam o método createLinearGradient().

Atenção:Internet Explorer 8 Versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método createLinearGradient() cria um objeto de transição linear.
A transição pode ser usada para preencher retângulos, círculos, linhas, texto e outros.

Dica:Use o objeto como strokeStyle ou fillStyle o valor da propriedade.

Dica:Use addColorStop() O método define diferentes cores e onde localizar essas cores no objeto gradient.

Sintaxe JavaScript:	context.createLinearGradient(x0,y0,x1,y1);

Valor do parâmetro

Parâmetro	Descrição
x0	Coordenada x do ponto inicial da transição
y0	Coordenada y do ponto inicial da transição
x1	Coordenada x do ponto final da transição
y1	Coordenada y do ponto final da transição

Mais exemplos

Exemplo online

Defina uma transição (de cima para baixo) como estilo de preenchimento retangular:

Demonstração de efeito usando JavaScript:

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do método createLinearGradient() no HTML canvas (Tutoriais Básicos Web　oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var my_gradient = ctx.createLinearGradient(0, 0, 0,170);
my_gradient.addColorStop(0, "preto");
my_gradient.addColorStop(1,"branco");
ctx.fillStyle = my_gradient;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Teste e veja ‹/›

Exemplo online

Defina uma transição de preto para vermelho e, em seguida, para branco como estilo de preenchimento retangular:

Demonstração do uso do método createLinearGradient():

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do método createLinearGradient() no HTML canvas (Tutoriais Básicos Web　oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"preto");
grd.addColorStop(0.5,"vermelho");
grd.addColorStop(1,"branco");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Teste e veja ‹/›

Manual de referência do canvas do HTML

HTML: <template> etiqueta