canvas锥形进度条怎么渐变

时间：2020-06-21 15:41:38 阅读：85 评论：0 收藏：0 [点我收藏+]

从一个渐变圆角进度条浅出画一个圆

开始

这一切需要从一个（简单）的需求开始，在最开始对设计第一眼看到这张图的时候，感觉挺简单的嘛，直接用echarts饼图模拟出来一个就好了

技术分享图片

echarts

然后上echarts试了一下发现实现不出来了

技术分享图片

设计图这边采用的是锥形渐变，而echarts只有线性渐变和径向渐变。

css

然后准备换种方案，css就有锥形渐变，然后通过conic-gradient加上mask画出了一个渐变的环形然后可以再通过剪裁实现出进度的展示。

但是存在两个问题，一个是conic-gradient属性兼容性不好ie和火狐都不支持，二个是后来发现了还存在一个需求进度条的两端需要有圆角，然后这种实现方式就不行了。

其实在写这篇文章的时候才想到一个方法就是在两端加上两个半圆形，不过得计算半圆形的位置。

Canvas & SVG

在我的理解中在页面上作图总共有四种方式。

dom+css
Canvas
SVG
WebGL

WebGL是一头雾水还是试试Canvas和SVG吧，因为更熟悉Canvas一些，我这边就采用Canvas来试试。

Canvas可以轻松的实现圆角和环形，但是他的api里面居然没有锥形渐变

然后就想着尝试手动来实现一个锥形渐变，然后查阅资料看到了一篇文章手把手教你画圆锥渐变，就是相当于画圆嘛，我们可以通过一条线一条线的画从而画出一个圆，然后把两端渐变的颜色通过计算找到中间画圆的每一条线的颜色组合起来就是一个渐变的效果了。

然后问题就是给你两个色值怎么计算中间的线段的颜色，其实对于rgba的颜色我们可以看到他是由四个数字组成的，那我把这四个数字分别求出四组长度相同且组内间隔相同的中间值那就可以得到颜色的中间值了，然后在搭配上张老师硬核的色值转换JS HEX十六进制与RGB,HSL颜色的相互转换那就可以实现出我们想要的效果了。

通过一个开始颜色和一个结束颜色，默认是rgba的颜色，num是分段数，就可以求出中间每一段的颜色了

  // 把颜色分段
  const beginColor = begin.slice(5, -1).split(‘,‘).map(item => Number(item))
  const endColor = end.slice(5, -1).split(‘,‘).map(item => Number(item))
  // 分段后的颜色储存在这个数组
  const middleColor = [[], [], [], []]
  // 循环rgba四种
  beginColor.forEach((item, index) => {
    // 当前的值每段颜色之间的间隔
    const differ = (endColor[index] - item) / (num - 1)
    // 循环分段数的次数
    for(let i = 0; i< num; i++) {
      // 每次加上这个间隔
      middleColor[index].push((item + differ * i).toFixed(2))
    }
  })
  console.log(middleColor)
  console.log(num)

然后绘制的话就是一段一段的画了，麻烦的地方就是计算每次从多少的角度画到多少的角度

  for(let i = 0; i< num; i++) {
    ctx.beginPath()
    // 这里是每次绘制的过程
    // 每次绘制一段小圆弧
    // 最后一段只需要画一段就好    
    if(i === num - 1) 
      ctx.arc( 150 * dpr,150 * dpr, 100 * dpr, (Math.PI * 2 * value) / num * i, (Math.PI * 2 * value) / num * (i + 1));
    else
      ctx.arc( 150 * dpr,150 * dpr, 100 * dpr, (Math.PI * 2 * value) / num * i, (Math.PI * 2 * value) / num * (i + 2));
    ctx.lineWidth = 60;
    // ctx.lineCap = "round";
    ctx.strokeStyle= `rgba(${middleColor[0][i]}, ${middleColor[1][i]}, ${middleColor[2][i]}, ${middleColor[3][i]})`;
    ctx.stroke();   
    ctx.closePath() 
  }