渐变填充色，包含至少两种颜色。图形的一部分以一种颜色开始，然后渐渐地变成另一种颜色，在其变化过程中，会经历一种或多种预定义的颜色。
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>
