chengtongpo 发表于 2021-3-8 08:55

渐变方案

线性渐变
       var grd=ctx.createLinearGradient(x0,y0,x1,y1);
                 x0-->渐变开始的x坐标
          y0-->渐变开始的y坐标
          x1-->渐变结束的x坐标
          y1-->渐变结束的y坐标
         
      grd.addColorStop(0,"black");      设置渐变的开始颜色
      grd.addColorStop(0.1,"yellow");   设置渐变的中间颜色
      grd.addColorStop(1,"red");      设置渐变的结束颜色

          ctx.strokeStyle=grd;
      ctx.stroke();
      
      备注:
         addColorStop(offse,color);
         中渐变的开始位置和结束位置介于0-1之间,0代表开始,1代表结束。中间可以设置任何小数
         
☞ 径向渐变

                ctx.createradialGradient(x0,y0,r0,x1,y1,r1);

            (x0,y0):渐变的开始圆的 x,y 坐标

            r0:开始圆的半径

            (x1,y1):渐变的结束圆的 x,y 坐标

            r1:结束圆的半径



页: [1]
查看完整版本: 渐变方案