canvas渐变

线性渐变

//获取画布。

 var cas = document.getElementById('cvs');
    var pencil = cas.getContext('2d');

//开始绘画
pencil.beginPath();

//创建一个渐变的样式
//参数描述： 渐变开始的x坐标，渐变开始的y坐标； 渐变结束的x坐标，渐变结束的y坐标
var lineG = pencil.createLinearGradient(80,80, 200,200);
//设置渐变行为  参数描述： 颜色的偏移量 0-1， ；颜色的色值
lineG.addColorStop(0.6,'red');
lineG.addColorStop(1,'yellow');
//将填充样式变为自定义的线性渐变颜色
// pencil.fillStyle= lineG
// pencil.fillRect(80,80, 200,200);

//将线性样式变为自定义的线性渐变颜色
pencil.strokeStyle = lineG;
pencil.lineWidth=5;
pencil.strokeRect(80,80,200,200);

径向渐变

//获取画布。 相当于拿到了绘画的一张纸

var cas = document.getElementById('cvs');
var pencil = cas.getContext('2d&