Metodo HTML canvas addColorStop()
Esempio
Definisci un gradiente che va dal nero al bianco, come 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);
Supporto del browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e utilizzo
Il metodo addColorStop() specifica i colori e la posizione in un oggetto gradiente.
Il metodo addColorStop() viene utilizzato insieme a createLinearGradient() o createRadialGradient() .
Nota: puoi chiamare più volte il metodo addColorStop() per modificare una sfumatura. Se ometti questo metodo per gli oggetti sfumatura, la sfumatura non sarà visibile. Devi creare almeno un punto di colore per avere una sfumatura visibile.
| sintassi JavaScript: | gradiente .addColorStop ( stop , colore ); |
|---|
Valori dei parametri
| Parameter | Description | Play it |
|---|---|---|
| stop | A value between 0.0 and 1.0 that represents the position between start and end in a gradient | |
| color | A CSS color value to display at the stop position |
Altri esempi
Esempio
Definisci un gradiente con più metodi addColorStop():
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);