Los últimos tutoriales de desarrollo web
 

HTML canvas createRadialGradient() Method

<Objeto Canvas

Ejemplo

Dibuje un rectángulo y rellenar con un 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);
Inténtalo tú mismo "

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.

Método
createRadialGradient() 4.0 9.0 3.6 4.0 10.1

Definición y Uso

El createRadialGradient() método crea un objeto de gradiente radial / circular.

El gradiente puede utilizarse para llenar rectángulos, círculos, líneas, texto, etc.

Tip: Utilice este objeto como el valor de los strokeStyle o fillStyle propiedades.

Tip: Utilice la addColorStop() método para especificar diferentes colores, y dónde colocar los colores en el objeto de gradiente.

la sintaxis de JavaScript: context . createRadialGradient( x0,y0,r0,x1,y1,r1 ) ;

Los valores de los parámetros

Parámetro Descripción
x0 La coordenada x del círculo de partida del gradiente
y0 La coordenada y del círculo de partida del gradiente
r0 El radio del círculo de partida
x1 La coordenada x del círculo final del gradiente
y1 La coordenada y del círculo final del gradiente
r1 El radio del círculo que termina

<Objeto Canvas