canvas錐形漸變進度條

謝大帥哥發表於2020-05-28

Canvas

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

開始

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

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