Metodo addColorStop() Canvas
Definizione e uso
addColorStop() Determina i colori e le posizioni dell'oggetto gradient.
Il metodo addColorStop() con createLinearGradient() o createRadialGradient() Utilizzare insieme
Nota:Puoi chiamare più volte il metodo addColorStop() per modificare la渐变. Se non utilizzi questo metodo sull'oggetto gradient, la渐变 non sarà visibile. Per ottenere una渐变 visibile, devi creare almeno una stop.
Esempio
Esempio 1
Definire una渐变 dal nero al bianco come stile di riempimento del 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);
Suggerimento:Più esempi sono disponibili nella parte inferiore della pagina.
Sintassi
gradient.addColorStop(stop,colore);
Valore del parametro
| Parametro | Descrizione |
|---|---|
| stop | Valori tra 0.0 e 1.0, che rappresentano la posizione tra l'inizio e la fine della渐变. |
| colore | Valore del colore CSS visualizzato alla fine della posizione. |
Più esempi
Esempio 2
Definire la渐变通过多个 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);
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente questa proprietà.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
