Metodo createLinearGradient() di Canvas
Definizione e uso
createLinearGradient()
Il metodo crea un oggetto di gradazione lineare.
La gradazione può essere utilizzata per riempire rettangoli, cerchi, linee, testi e così via.
Suggerimento:Usa questo oggetto come strokeStyle o fillStyle valore dell'attributo.
Suggerimento:Usa addColorStop() Il metodo specifica diversi colori e la posizione in cui posizionare i colori nell'oggetto gradient.
Esempio
Vedi anche:
Definisci una gradazione dal nero al bianco (dal sinistro al destro) 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);
Sintassi
context.createLinearGradient(x0,y0,x1,y1);
Valore del parametro
Parametro | Descrizione |
---|---|
x0 | L'asse x dell'inizio della gradazione. |
y0 | L'asse y dell'inizio della gradazione. |
x1 | L'asse x della fine della gradazione. |
y1 | L'asse y della fine della gradazione. |
Altri esempi
Esempio 2
Definisci una gradazione (dal alto al basso) come stile di riempimento del rettangolo:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);
Esempio 3
Definisci una gradazione dal nero al rosso e poi al bianco come stile di riempimento del rettangolo:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,170,0); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(0.5,"red"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; 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>.