Los gradientes de lona -
Los gradientes se pueden utilizar para llenar rectángulos, círculos, líneas, texto, etc. formas de la tela no se limitan a los colores sólidos.
Hay dos tipos diferentes de gradientes:
- createLinearGradient ( x,y,x1,y1 ) - crea un gradiente lineal
- createRadialGradient ( x,y,r,x1,y1,r1 ) - crea un degradado radial / circular
Una vez que tenemos un objeto de gradiente, hay que añadir dos o más etapas de color.
El addColorStop() método se indican las paradas de color, y su posición a lo largo del gradiente. gradiente posiciones pueden estar en cualquier lugar entre 0 a 1.
Para utilizar el gradiente, establezca la propiedad fillStyle o strokeStyle al degradado, a continuación, dibujar la forma (rectangle, text, or a line) .
Usando createLinearGradient()
Ejemplo
Crear un gradiente lineal. Llenar rectángulo con el gradiente:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); Inténtalo tú mismo " Usando createRadialGradient() :
Ejemplo
Crear un degradado radial / circular. Llenar rectángulo con el gradiente:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
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,80); Inténtalo tú mismo "