⇪

Gradiente radial

facebook-svg gplus-svg twitter-svg

El gradiente radial ( o circular ) se puede utilizar como relleno para formas geométricas, líneas y texto dentro del <canvas>.

  JavaScript Descripción Defecto
createRadialGradient() context.createRadialGradient(x0,y0,r0,x1,y1,r1); Crea un gradiente radial para utilizar en el <canvas>
x e y son las coordenadas del centro de los circulos
r es el radio de los circulos. 		 
addColorStop() gradient.addColorStop(stop,color); Especifica los colores y la posición donde para el gradiente.  
fillStyle context.fillStyle = color | gradiente | patrón; Determina o devuelve el color, gradiente o patrón del relleno. negro
fill() context.fill(); Rellena una forma geométrica. black

Vea la chuleta con las propiedades y metodos() de canvas.

Para definir los gradientes radiales con el método createRadialGradient() utilizamos dos círculos imaginarios. El gradiente radial parte desde la circunferencia del primer circulo, y se va hacia la circunferencia del segundo.
El método createRadialGradient(x0,y0,r0,x1,y1,r1) toma seis argumentos. Los tres primeros definen el primer circulo imaginario, x0 e y0 siendo las coordenadas del centro, mientras que r0 representa el radio del circulo.
Los siguientes tres argumentos definen, de la misma manera, el segundo circulo.

El método addColorStop(stop,color) toma dos argumentos.
El primer argumento, stop, puede tomar valores desde 0.0 hasta 1.0, y representa una posición a lo largo del vector gradiente definido anteriormente con método createLinearGradient(). Podemos utilizar el método addColorStop() tantas veces como creamos necesario.
El segundo argumento representa el color, que puede tomar cualquier valor aceptado en el CSS ( nombres de colores, valores hex, rgb, rgba, hsl, hsla).

Veamos un ejemplo. A continuación dibujamos un rectángulo que cubre todo el lienzo, desde la esquina izquierda arriba ( x = 0, y = 0 ) hasta la esquina derecha abajo ( x = canvas.width, y = canvas.height ).
Utilizando el método createRadialGradient() creamos un gadiente radial, que utilizamos luego para rellenar este rectángulo.

Su navegador no soporta canvas :( 

	var canvas = document.getElementById("lienzo");
		if (canvas && canvas.getContext) {
		var ctx = canvas.getContext("2d");
			if (ctx) {
					ctx.rect(0,0,canvas.width,canvas.height);
											
					var grd = ctx.createRadialGradient(80, 125, 25, 125, 125, 120);// x0, y0, r0, x1, y1, r1
					grd.addColorStop(0, "#8df");
					grd.addColorStop(1, "#04b");
					ctx.fillStyle = grd;
					ctx.fill();

		}
}
Su navegador no soporta canvas :(

Un ejemplo útil

Podemos escribir una función que crea un gradiente radial, y utilizar esta función y utilizar esta función para crear varias pelotas de distinto tamaño.

function Grd(x, y, r) {
  grd = ctx.createRadialGradient(x, y, 0, x, y, r);
  grd.addColorStop(0, 'hsla(0,10%,65%,0)');
  grd.addColorStop(1, 'hsla(0,10%,25%,1)');
  return grd;
}

See the Pen radial gradient by Gabi (@enxaneta) on CodePen.