Canvas支持线性渐变填充，和放射性渐变填充。同时，这两种渐变形式都支持多种颜色混合。
1，线性渐变
（1）要创建线性渐变，我们需要给 createLinearGradient() 传入两个坐标点，分别表示渐变的起点和终点。起点和终点构成了颜色逐渐过渡的区间。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//边框线条宽度
context.lineWidth = 2;
//边框线条颜色
context.strokeStyle = "#c0c0c0";
//绘制路径
context.moveTo(200, 50);
context.lineTo(100, 150);
context.lineTo(300,150);
context.closePath();
//创建一个从(150,0)到(250,0)的渐变
var gradient = context.createLinearGradient(150, 0, 250, 0);
//添加两种颜色
gradient.addColorStop(0, "magenta");
gradient.addColorStop(1, "yellow");
//填充渐变色
context.fillStyle = gradient;
context.fill();
context.stroke();
（2）设置渐变颜色，需要使用渐变对象的 addColorStop() 方法。调用这个方法，除了需要提供颜色值（颜色名），还需要提供一个0~1的偏移值。0表示位于渐变的起点，1表示位于渐变的终点。
通过多次调用 addColorStop() 方法，我们可以创建多种颜色构成的渐变。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//边框线条宽度
context.lineWidth = 2;
//边框线条颜色
context.strokeStyle = "#c0c0c0";
//绘制路径
context.moveTo(200, 50);
context.lineTo(100, 150);
context.lineTo(300,150);
context.closePath();
//创建一个从(150,0)到(250,0)的渐变
var gradient = context.createLinearGradient(150, 0, 250, 0);
//添加多种颜色
gradient.addColorStop(0, "magenta");
gradient.addColorStop(0.25, "blue");
gradient.addColorStop(0.5, "green");
gradient.addColorStop(0.75, "yellow");
gradient.addColorStop(1, "red");
//填充渐变色
context.fillStyle = gradient;
context.fill();
context.stroke();
2，放射性渐变
（1）要创建放射性渐变，我需要使用 createRadialGradient() 指定两个圆。因为放射性渐变就是颜色从一个小圆过渡到一个更大、包含它的圆。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//边框线条宽度
context.lineWidth = 2;
//边框线条颜色
context.strokeStyle = "#c0c0c0";
//绘制路径
context.moveTo(200, 50);
context.lineTo(100, 150);
context.lineTo(300,150);
context.closePath();
//渐变起点是坐标为(200,100)，半径10的圆。终点是相同圆心坐标，半径50的圆
var gradient = context.createRadialGradient(200, 100, 10, 200, 100, 50);
//添加两种颜色
gradient.addColorStop(0, "magenta");
gradient.addColorStop(1, "yellow");
//填充渐变色
context.fillStyle = gradient;
context.fill();
context.stroke();
（2）同样通过多次调用 addColorStop() 方法，可以实现多色放射性渐变效果。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//边框线条宽度
context.lineWidth = 2;
//边框线条颜色
context.strokeStyle = "#c0c0c0";
//绘制路径
context.moveTo(200, 50);
context.lineTo(100, 150);
context.lineTo(300,150);
context.closePath();
//渐变起点是坐标为(200,100)，半径10的圆。终点是相同圆心坐标，半径50的圆
var gradient = context.createRadialGradient(200, 100, 10, 200, 100, 50);
//添加多种颜色
gradient.addColorStop(0, "magenta");
gradient.addColorStop(0.25, "blue");
gradient.addColorStop(0.5, "green");
gradient.addColorStop(0.75, "yellow");
gradient.addColorStop(1, "red");
//填充渐变色
context.fillStyle = gradient;
context.fill();
context.stroke();
fillStyle和 strokeStyle 属性可以设置为 CanvasGradient 对象
CanvasGradient对象的创建有两个方法:createLinearGradient和createRadialGradient
grd=context.createLinearGradient(startX,startY,endX,endY);
grd.addColorStop(offset,color);
grd=context.createRadialGradient(startX,startY,endX,endY);
grd.addColorStop(offset,color);
addColorStop()方法添加颜色中间值
例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>canvas createLinearGradient</title>
<script>
window.onload=function(){
var canvas=document.getElementByIdx_x("mycanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.moveTo(170,80);
context.bezierCurveTo(130,100,130,150,230,150);
context.bezierCurveTo(250,180,320,180,340,150);
context.bezierCurveTo(420,150,420,120,390,100);
context.bezierCurveTo(430,40,370,20,340,50);
context.bezierCurveTo(320,5,250,20,250,50);
context.bezierCurveTo(200,5,150,20,170,80);
context.closePath();
var grd = context.createLinearGradient(230,0,370,200);
grd.addColorStop(0,"#8ed6ff");
grd.addColorStop(1,"#004cb3");
context.fillStyle=grd;
context.fill();
context.lineWidth=5;
context.strokeStyle="#0000ff";
context.stroke();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="600" height="400"></canvas>
</body>
</html>