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 browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| Metodo | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e l'utilizzo
addColorStop() metodo specifica i colori e la posizione di un oggetto gradiente.
addColorStop() metodo viene utilizzato insieme con createLinearGradient() o createRadialGradient() .
Note: È possibile chiamare addColorStop() il metodo più volte per modificare una sfumatura. Se si omette questo metodo per oggetti sfumati, il gradiente non sarà visibile. È necessario creare almeno un'interruzione di 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 alla stop di posizione | Gioca " |
Altri esempi
Esempio
Definire una sfumatura 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 "