Canvas渐变

// 获取画布
var c = document.querySelector('canvas');
// 获取绘图对象
var ctx = c.getContext('2d');
//创建线性渐变方案                   起始的坐标
var lgd = ctx.createLinearGradient(100, 300, 500, 300);
// 添加渐变颜色
lgd.addColorStop(0, 'red');
lgd.addColorStop(1, 'green');
ctx.strokeStyle = lgd;
ctx.moveTo(100, 330);
ctx.lineTo(500, 330);
ctx.lineWidth = 30;
ctx.stroke();

// 创建径向渐变方案                 起点坐标 半径 终点坐标 半径
var rgb = ctx.createRadialGradient(400, 200, 50, 400, 200, 100);
rgb.addColorStop(0, 'red');
rgb.addColorStop(1, 'green');
ctx.fillStyle = rgb;
ctx.moveTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(500, 300);
ctx.lineTo(500, 100);
ctx.closePath();
ctx.fill();