Método HTML canvas createRadialGradient()
Definição e uso
createLinearGradient() Método para criar objeto de gradiente radial/circular.
O gradiente pode ser usado 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 localizar 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 início do círculo |
| x1 | Coordenada x do círculo final da gradiente |
| y1 | Coordenada y do círculo final da gradiente |
| r1 | Raio do final do círculo |
Suporte do navegador
Os números na tabela indicam a versão do navegador que suportou a propriedade pela primeira vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:Os navegadores Internet Explorer 8 e anteriores não suportam o elemento <canvas>.
