在canvas里面，除了使用純色，我們還能把填充和筆觸樣式設置為漸變色：線性漸變和徑向漸變。
線性漸變 createLinearGradient(x0,y0,x1,y1) 返回 CanvasGradient
四個參數分別是漸變色起始坐標x，起始坐標y，結束坐標x，結束坐標y。
漸變色沿着兩點之間的一條線來進行漸變。
徑向漸變 createRadialGradient(x0,y0,r0,x1,y1,r1) 返回CanvasGradient
六個參數分別是
起點圓心坐標（x0,y0）
起點圓心半徑（r0）
終點圓心坐標（x1,y1）
終點圓心半徑（r1）
這兩種漸變方法都會返回一個 CanvasGradient對象，這個對象定義了addColorStop(position,color)的方法。
addColorStop() 給漸變的梯度線添加一種純色， 返回void。
舉例
1 var ctx = document.querySelector('canvas').getContext('2d'); 2 3 var grad = ctx.createLinearGradient(0,0,500,500); 4 5 grad.addColorStop(0,'green'); 6 7 grad.addColorStop(0.5,'yellow'); 8 9 grad.addColorStop(1,'blue');
注意，此時在畫布上已經創建了一個矩形漸變范圍，坐標是 0,0,500,500;
但並沒有顯示出來，此時需要我們再繪出一個別的形狀--以矩形為例。
來選擇我們要顯示的漸變范圍，這個重新繪出的矩形需要取grad的樣式。
1 ctx.fillStyle = grad; 2 ctx.fillRect(x,y,w,h);
此時，也就是說我們接下來要畫的矩形，使用了我們剛才創建的漸變色。
不難想象，我們預先配置好的漸變范圍其實就是一個長寬各500的矩形，漸變方向
是從左上角到右下角。
但是，我們要把這個新繪制矩形的放在哪呢？
我們可以把我們配置好的500*500的漸變范圍當一塊地，上面被土掩蓋了，下面是各種果實。你想看哪塊的果實，你就把這個新矩形畫在哪里。
你可以也畫一個0，0，500，500的矩形，直接把整塊地翻起來。
你也可以畫一個0，0，50，50的矩形，只能看到左上角的綠色green，因為他漸變到yellow,或許是從50之后才開始的。
你也可以畫一個450，450，50，50的矩形，那么你看到的將是右下角的blue。