Canvas - Gradienty
Gradienty mogą być użyte do wypełnienia prostokątów, okręgów, linii, tekstu itp Kształty na płótnie nie są ograniczone do jednolitych kolorach.
Istnieją dwa różne typy gradientów:
- createLinearGradient ( x,y,x1,y1 ) - tworzy się gradient liniowy
- createRadialGradient ( x,y,r,x1,y1,r1 ) - tworzy promieniową / okrągły gradientu
Kiedy już mamy obiekt gradientu, musimy dodać dwa lub więcej przystanków kolorów.
addColorStop() Metoda określa przystanki kolorów, a jego położenie wzdłuż gradientu. Pozycje Gradient może być w dowolnym miejscu w przedziale od 0 do 1.
Aby użyć gradientu, należy ustawić właściwość fillStyle lub strokeStyle do gradientu, a następnie narysować kształt (rectangle, text, or a line) .
Korzystanie createLinearGradient()
Przykład
Tworzenie gradientu liniowego. Wypełnij prostokąt z gradientem:
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); Spróbuj sam " Korzystanie createRadialGradient() :
Przykład
Tworzenie promieniową / okrągły gradient. Wypełnij prostokąt z gradientem:
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); Spróbuj sam "