canvas之实现渐变颜色

线性渐变

   //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    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');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    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);