Tela - Sfumature
Le sfumature possono essere utilizzati per riempire rettangoli, cerchi, linee, testo, ecc forme sulla tela non sono limitati a colori a tinta unita.
Ci sono due tipi di gradienti:
- createLinearGradient ( x,y,x1,y1 ) - crea un gradiente lineare
- createRadialGradient ( x,y,r,x1,y1,r1 ) - crea un gradiente radiale / circolare
Una volta che abbiamo un oggetto pendenza, dobbiamo aggiungere due o più interruzioni di colore.
Il addColorStop() metodo specifica le interruzioni di colore, e la sua posizione lungo il gradiente. posizioni gradiente può essere ovunque tra 0 a 1.
Per utilizzare il gradiente, impostare la proprietà FillStyle o strokeStyle al gradiente, quindi disegnare la forma (rectangle, text, or a line) .
Utilizzando createLinearGradient()
Esempio
Creare una sfumatura lineare. Riempire rettangolo con il gradiente:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); Prova tu stesso " Utilizzando createRadialGradient() :
Esempio
Creare un gradiente radiale / circolare. Riempire rettangolo con il gradiente:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Prova tu stesso "