Método createRadialGradient() do Canvas
Definição e uso
createLinearGradient()
O método cria o objeto de gradiente radial/circular.
A gradiente pode ser usada para preencher retângulos, círculos, linhas, texto e muito mais.
Dica:Use esse objeto como strokeStyle ou fillStyle o valor da propriedade.
Dica:Use addColorStop() O método define diferentes cores e onde posicionar essas cores no objeto gradient.
Exemplo
Desenhar um retângulo e preenchê-lo com uma gradiente radial/circular:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"vermelho"); grd.addColorStop(1,"branco"); // Preencher com gradiente ctx.fillStyle=grd; ctx.fillRect(10,10,150,100);
Sintaxe
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Valor do parâmetro
Parâmetro | Descrição |
---|---|
x0 | Coordenada x do círculo inicial da gradiente. |
y0 | Coordenada y do círculo inicial da gradiente. |
r0 | Raio do círculo inicial. |
x1 | Coordenada x do círculo final da gradiente. |
y1 | Coordenada y do círculo final da gradiente. |
r1 | Raio do círculo final. |
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 |
Observação:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.