Manual de referência do HTML

大全 de etiquetas HTML

Método createRadialGradient() do HTML canvas

createRadialGradient() é um método do Canvas 2O D API determina as coordenadas de dois círculos com base nos parâmetros, desenhando o gradiente radiativo. Este método retorna CanvasGradient.

Manual de referência do canvas HTML

Exemplo online

Desenhe um retângulo e use gradiente radial/Preenchimento de gradiente circular:

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do método createRadialGradient() no HTML canvas (Tutorial básico da Web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="borda:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
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");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam createRadialGradient() método.

Atenção:Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método createRadialGradient() cria uma gradiente/objeto de gradiente circular.
A gradiente pode ser usada para preencher retângulos, círculos, linhas, texto e mais

Dica:Use o objeto comostrokeStyle ou fillStyle o valor da propriedade.

Dica:Use addColorStop() Método define diferentes cores e onde localizar as cores no objeto gradient.

Sintaxe JavaScript:	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

Manual de referência do canvas HTML

HTML: <template> etiqueta