Gradienti di tela HTML
Tela - Gradienti
I gradienti possono essere utilizzati per riempire rettangoli, cerchi, linee, testo, ecc. Le forme sulla tela non si limitano ai colori solidi.
Esistono due diversi tipi di gradiente:
- createLinearGradient( x,y,x1,y1 ) - crea un gradiente lineare
- createRadialGradient( x,y,r,x1,y1,r1 ) - crea un gradiente radiale/circolare
Una volta che abbiamo un oggetto gradiente, dobbiamo aggiungere due o più interruzioni di colore.
Il metodo addColorStop() specifica le interruzioni di colore e la sua posizione lungo il gradiente. Le posizioni dei gradienti possono essere comprese tra 0 e 1.
Per utilizzare la sfumatura, imposta la proprietà fillStyle o strokeStyle sulla sfumatura, quindi disegna la forma (rettangolo, testo o una linea).
Utilizzo di createLinearGradient()
Esempio
Crea un gradiente lineare. Riempi il rettangolo con il 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);
Usando createRadialGradient():
Esempio
Crea un gradiente radiale/circolare. Riempi il rettangolo con il 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);