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:

Seu navegador não suporta a tag HTML5 canvas.

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);

Experimente você mesmo

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>.