這一切需要從乙個（簡單）的需求開始，在最開始對設計第一眼看到這張圖的時候，感覺挺簡單的嘛，直接用echarts餅圖模擬出來乙個就好了
然後上echarts試了一下發現實現不出來了
設計圖這邊採用的是錐形漸變，而echarts只有線性漸變和徑向漸變。
然後準備換種方案，css就有錐形漸變，然後通過conic-gradient加上mask畫出了乙個漸變的環形然後可以再通過剪裁實現出進度的展示。
但是存在兩個問題，乙個是conic-gradient屬性相容性不好ie和火狐都不支援，二個是後來發現了還存在乙個需求進度條的兩端需要有圓角，然後這種實現方式就不行了。
其實在寫這篇文章的時候才想到乙個方法就是在兩端加上兩個半圓形，不過得計算半圓形的位置。在我的理解中在頁面上作圖總共有四種方式。
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) =>
})console.log(middlecolor)
console.log(num)
for(let i = 0; i< num; i++) , $, $, $)`;
ctx.stroke();
ctx.closepath()
}
其實把繪製的過程放慢看
就是這個過程，每次畫一段，每段不同的顏色組合起來就是乙個漸變色，然後分段數再加多一點就會靠上去很流暢。
在完成後發現了幾個問題，首先是在分段數很少的時候就會出現一塊一塊的間隔
就像這樣，我大概分析了一下，猜測這個間隔出現的原因應該是我計算每一段的角度的時候肯定有除不盡的，我就四捨五入了，應該就會產生一些小間隔。
然後我就覺得把分段數提高應該就會好一些，然後就發現分段數高間隔會生成類似於摩爾紋的東西
然後還有乙個問題就是有鋸齒，不清楚，解決方案也很簡單，就是把你的畫布放大指定倍數，然後半徑也放大同樣的倍數，最後dom的高寬不變，就會讓繪製的圖形更加的清晰。
到此這個問題就算是解決了，然後我還順便寫了乙個庫，大家有興趣的可以去使用一下，我還加上了數字，動畫也可以支援多段漸變gradient-ring-progress
通過這次的需求我收穫到了，做東西需要完全的去了解了需求再去確定實現方案然後再動手，實現方案其實有非常多種，我們需要找到的是最合適的解決方案。最後抄襲張老師的一句話
然而乙個人的積累總是有限，而創意總是無限的，因此一定還有其他更好更妙更簡單的實現，歡迎分享歡迎指教！css conic-gradient()錐形漸變簡介
手把手教你畫圓錐漸變
js hex十六進製制與rgb,hsl顏色的相互轉換
漸變進度條
用建立的方式來寫漸變的進度條 public class myprogressview extends viewgroup public myprogressview context context,attributeset attrs override protected void onlayout...
canvas圓形進度條
canvas中沒有直接繪製圓的方法，但有乙個繪製弧線的context.arc方法，下面講下用該方法如何繪製出效果。引數說明 看到這裡，大家就會明白怎麼畫圓了把，只要讓起始角和結束角度為乙個圓周就可以了。下面開始畫圖咯！環形進度條主要兩部分組成，一是灰色圓，另一是藍色弧度。也就是說灰色圓圈和藍色弧同圓...
canvas 畫進度條
var circle01 document.queryselector mycanvas01 drawall 50,math.pi,circle01 function drawall percent,sr,canvasid if sr math.pi 2 sr 3 2 math.pi var cxt...