Esempio
Definire un gradiente che va dal nero al bianco, come lo stile di riempimento per il rettangolo:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100); Prova tu stesso " Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| metodo | |||||
|---|---|---|---|---|---|
| addColorStop() | sì | 9.0 | sì | sì | sì |
Definizione e utilizzo
Il addColorStop() metodo specifica i colori e la posizione di un oggetto di gradiente.
Il addColorStop() metodo viene utilizzato insieme con createLinearGradient() o createRadialGradient() .
Nota: è possibile chiamare il addColorStop() il metodo più volte per cambiare un gradiente.Se si omette questo metodo per oggetti sfumati, il gradiente non sarà visibile. È necessario creare almeno una fermata colore ad avere una pendenza visibile.
| sintassi JavaScript: | gradient.addColorStop(stop,color); |
|---|
valori dei parametri
| Parametro | Descrizione | Gioca |
|---|---|---|
| stop | Un valore compreso tra 0,0 e 1,0 che rappresenta la posizione tra inizio e fine in un gradiente | Gioca " |
| color | Un valore di colore CSS per visualizzare la posizionedi arresto | Gioca " |
Altri esempi
Esempio
Definire un gradiente con più addColorStop() metodi:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Prova tu stesso "