HTML5 Canvas 基礎(二) 漸層填色

如果想要在 canvas 內填入漸層的顏色的話，我們可以透過 createLinearGradient(x0, y0, x1, y1) 來設定漸層的填色，裡面的四個值分別為漸層起始點和終點的 x, y 座標，在利用 addColorStop() 設定漸層的點的位置和顏色。

var grd=context.createLinearGradient(0,0,175,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
context.fillStyle = grd;  //填滿顏色
context.fillRect(0,0,175,100); 

如果把漸層的起始和終點改座標，可以像這樣做出垂直方向的漸層

var grd=context.createLinearGradient(0,0,0,100);

 設定多種顏色的漸層：

var grd=context.createLinearGradient(0,0,175,0);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"yellow");
grd.addColorStop(1,"green");

要設定放射狀漸層，則是使用 createRadialGradient(x0, y0, r0, x1, y1, r1)，數值各代表起始和終點的座標位置還有起始圓和終點圓的半徑，若 x0,y0 和 x1,y1 座標一樣，則會是同心圓。

var grd=context.createRadialGradient(75,50,2,75,50,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");