從一個漸變圓角進度條淺出畫一個圓

開始

這一切需要從一個（簡單）的需求開始，在最開始對設計第一眼看到這張圖的時候，感覺挺簡單的嘛，直接用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() 
  }

結果非常的順利，就是自己想要的結果，具體怎么一段一段的畫，怎么求出顏色的中間值看這里