tutoriais mais recente desenvolvimento web
 

HTML canvas createRadialGradient() Method

<Object Canvas

Exemplo

Desenhar um rectângulo e encher-se com um gradiente radial / circular:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,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
createRadialGradient() 4.0 9 3,6 4.0 10.1

Definição e Uso

O createRadialGradient() método cria um objecto gradiente radial / circular.

O gradiente pode ser usado para preencher rectângulos, círculos, linhas, texto, etc.

Tip: Use esse objeto como o valor para os strokeStyle ou fillStyle propriedades.

Tip: Use o addColorStop() método para especificar diferentes cores, e onde posicionar as cores no objecto gradiente.

sintaxe JavaScript: context . createRadialGradient( x0,y0,r0,x1,y1,r1 ) ;

Os valores dos parâmetros

Parâmetro Descrição
x0 A coordenada x do círculo de partida do gradiente
y0 A coordenada y do círculo de partida do gradiente
r0 O raio do círculo de partida
x1 A coordenada x do círculo final do gradiente
y1 A coordenada y do círculo final do gradiente
r1 O raio do círculo terminando

<Object Canvas