Exemplo
Definir um gradiente que vai do preto ao branco, como o estilo de preenchimento para o 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); Tente você mesmo " Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 9 | 3,6 | 4.0 | 10.1 |
Definição e Uso
O addColorStop() método especifica as cores e a posição de um objecto gradiente.
O addColorStop() método é usado em conjunto com createLinearGradient() ou createRadialGradient() .
Note: Você pode chamar o addColorStop() método várias vezes para mudar um gradiente. Se você omitir esse método para objetos de gradiente, o gradiente não será visível. Você precisa criar pelo menos uma paragem de cor para ter um gradiente visível.
| sintaxe JavaScript: | gradient . addColorStop( stop , color ) ; |
|---|
Os valores dos parâmetros
| Parâmetro | Descrição | Jogue |
|---|---|---|
| stop | Um valor entre 0,0 e 1,0, que representa a posição entre o início e fim num gradiente | Jogue " |
| color | Um valor de cor CSS para exibir na stop posição | Jogue " |
mais Exemplos
Exemplo
Definir um gradiente com múltiplos addColorStop() métodos:
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);
Tente você mesmo "