本篇繼續介紹html5的繪製效果，和先前介紹的不同，本篇介紹的漸變並不是一個狀態值，他是先前介紹的fillStyle 的一個值。首先來看一個範例：
#程式碼如下：這是一個線性漸變，首先透過createLinearGradient建立線性漸變，四個參數分別為起點的橫縱座標和終點的橫縱座標，然後為兩個點加入色值，addColorStop的0為起點，##1為終點，第二個參數是顏色，可以是rgbvar gradient = context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);
登入後複製
也可以是
rgba
。
前一個是線性漸變，還有弧形漸變，效果如下：
程式碼如下：
var gradient = context.createRadialGradient(50,50,5,150,150,10); gradient.addColorStop(0,"rgb(0,0,0)"); gradient.addColorStop(1,"rgb(0,255,0)"); context.fillStyle = gradient; context.fillRect(50,50,100,100);
前三個參數為起點圓的圓心橫縱座標，圓半徑。後三個參數如下是終點圓圓心座標和圓的半徑。
#使用圓形漸層可以畫出中心開始的漸變，效果如下：
程式碼如下：
var gradient = context.createRadialGradient(100,100,0,100,100,72); gradient.addColorStop(0,"rgb(0,0,0)"); gradient.addColorStop(1,"rgb(0,255,0)"); context.fillStyle = gradient; context.fillRect(50,50,100,100);
