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:

Il tuo browser non supporta il tag HTML5 canvas.

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

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:

Il tuo browser non supporta il tag canvas.

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);

Prova tu stesso

Esempio 3

Definisci una gradazione dal nero al rosso e poi al bianco come stile di riempimento del rettangolo:

Il tuo browser non supporta il tag canvas.

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);

Prova tu stesso

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>.