漸變填充色，包含至少兩種顏色。圖形的一部分以一種顏色開始，然後漸漸地變成另一種顏色，在其變化過程中，會經歷一種或多種預定義的顏色。
canvas 支持兩種漸變填充：線性漸變 或 放射性漸變。
線性漸變填充：漸變色在一條直線上從一個點延伸到另一個點。使用 context.createLinearGradient( x1, y1, x2, y2 ) 方法將沿着點（x1, y1）與點（x2, y2）之間的直線填充漸變色。
放射性漸變填充：從你指定的空間的中心開始向各個方向擴散，從而創建出一個圓形。漸變從圓心開始到圓的邊緣結束。
context.createRadialGradient( x1, y1, r1, x2, y2, r2 ) 方法以兩個圓形作爲參數，每個圓形由其圓心座標和半徑指定。
爲了實現漸變填充，在漸變過程中，需要至少兩種不同的顏色。在僅有兩種顏色的情況下，填充的圖形會從第一種顏色慢慢地變成第二種顏色。
如果加入更多的中間顏色，填充的圖形就會自然地從第一種顏色變到第二種顏色，再到第三種顏色，以此類推，直到變成最終的顏色。
在設置顏色的同時，還需爲每種顏色指定它們的位置，該值是介於 0 ~ 1 之間的小數，稱爲填充的比例。
比如，在兩種顏色的填充中，分別指定0和1作爲比例。
而在一個等距的三色漸變中則會使用 0、0.5 與 1 作爲填充比例，0.5 表示第二種顏色恰好位於第一種顏色和最後一種顏色的中間位置。如果填充比例設置爲 0、0.1 與 1的話，第一種顏色就會很快變爲第二種顏色，再慢慢變成最後一種顏色。這裏的數值不是表示像素值，而是與 1 的比率。
以顏色和比例值作爲參數，可以使用 Gradient 對象的 Gradient.addColorStop( ratio, color ) 方法爲漸變色添加顏色：
let gradient = context.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0, "#ffffff");
gradient.addColorStop(1, "#ff0000");
以上代碼在點（0,0）至點（100,100）之間創建一種線性漸變色，並定義兩種顏色以及各自的比例，該漸變色將從白色漸變爲紅色。
然後將該漸變色賦值給 context.fillStyle 屬性，並使用它繪製一個圖形：
context.fillStyle = gradient;
context.fillRect(0, 0, 100, 100);
下面代碼實現 線性漸變 和 放射性漸變 如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
<title></title>
<style>
*{margin: 0;padding: 0}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
<script>
(function(){
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(e){
return !!e.getContext;
}
function canvasApp(){
var myCanvas = document.getElementById("myCanvas");
if(!canvasSupport(myCanvas)){
return ;
}
// start
var context = myCanvas.getContext("2d");
drawScreen(myCanvas, context);
}
// write your codes
function drawScreen(myCanvas, context){
// 線性漸變填充
let pt1 = {
x: 10,
y: 10
};
let pt2 = {
x: 100,
y: 100
};
let gradient = context.createLinearGradient(pt1.x, pt1.y, pt2.x, pt2.y);
gradient.addColorStop(0, "#ffffff");
gradient.addColorStop(0.3, "#0000ff");
gradient.addColorStop(1, "#ff0000");
context.fillStyle = gradient;
context.fillRect(pt1.x, pt1.y, pt2.x, pt2.y);
// 放射性漸變填充
let c1 = {
x: 200,
y: 60,
radius: 0
};
let c2 = {
x: 200,
y: 60,
radius: 50
};
let gradient2 = context.createRadialGradient(c1.x, c1.y, c1.radius, c2.x, c2.y, c2.radius);
gradient2.addColorStop(0, "#ffffff");
gradient2.addColorStop(0.3, "#0000ff");
gradient2.addColorStop(1, "#ff0000");
context.fillStyle = gradient2;
context.fillRect(c1.x - c2.radius, c2.y - c2.radius, c2.radius * 2, c2.radius * 2);
}
})();
</script>
</body>
</html>
