Método addColorStop() do Canvas
Definição e uso
addColorStop() Determina as cores e as posições no objeto gradient.
O método addColorStop() com createLinearGradient() ou createRadialGradient() Usados juntos.
Notas:Você pode chamar várias vezes o método addColorStop() para alterar a transição gradual. Se você não usar esse método no objeto gradient, a transição gradual não será visível. Para obter uma transição gradual visível, você precisa criar pelo menos um ponto de cor.
Exemplo
Exemplo 1
Defina uma transição gradual de preto para branco como estilo de preenchimento do retângulo:
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);
Dica:Mais exemplos estão disponíveis na parte inferior da página.
Sintaxe
gradient.addColorStop(stop,color);
Valor do parâmetro
| Parâmetro | Descrição |
|---|---|
| stop | Um valor entre 0.0 e 1.0, que representa a posição entre o início e o final da transição gradual. |
| color | O valor de cor CSS exibido no local final. |
Mais exemplos
Exemplo 2
Defina a transição gradual através de várias métodos addColorStop():
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("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Suporte do navegador
Os números na tabela indicam a versão do navegador que suporta completamente essa propriedade.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
