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'); //开始绘画 pencil.beginPath(); //创建一个渐变的样式 //参数描述： 起始圆圆点的x坐标，起始圆圆点的y坐标，起始圆的半径； 终点圆圆点的x坐标，终点圆圆点的y坐标，终点圆的半径 var radialG = pencil.createRadialGradient(100,80, 10, 200,200,90); //设置渐变行为 参数描述： 颜色的偏移量 0-1， ；颜色的色值 radialG.addColorStop(0.6,'red'); radialG.addColorStop(1,'yellow'); //将填充样式变为自定义的径向渐变颜色 // pencil.fillStyle= radialG // pencil.fillRect(80,80, 200,200); //将线性样式变为自定义的径向渐变颜色 pencil.strokeStyle = radialG; pencil.lineWidth=5; pencil.strokeRect(80,80,200,200);