Canvas - Gradienții
Gradienții pot fi folosite pentru a umple dreptunghiuri, cercuri, linii, text, etc forme pe panza nu sunt limitate la culori solide.
Există două tipuri diferite de gradienți:
- createLinearGradient( x,y,x1,y1 ) - creează un gradient liniar
- createRadialGradient( x,y,r,x1,y1,r1 ) - creează un radial / gradient de circular
Odată ce avem un obiect de gradient, trebuie să adăugăm două sau mai multe stații de culoare.
addColorStop() metoda specifică oprește culoarea și poziția sa de-a lungul gradientului. pozițiile degrade poate fi oriunde între 0 la 1.
Pentru a utiliza gradientul, setați proprietatea sau strokeStyle la stil de fișier gradient, apoi desena forma (rectangle, text, or a line) .
Utilizarea createLinearGradient()
Exemplu
Creați un gradient liniar. Umple dreptunghi cu gradientul:
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); Încearcă - l singur » Utilizarea createRadialGradient() :
Exemplu
Crearea unui gradient radial / circular. Umple dreptunghi cu gradientul:
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); Încearcă - l singur »