射雞獅說圓形的進度條不是我要的效果

一個沒什麼特別的日子，你接到了一個沒什麼特別的設計圖，準備寫個沒什麼特別的活動頁，而後，看到了一個效果：

「唔，射雞獅啊，你這個圓是否是沒畫好啊，缺了個角。」
「這是設計，你懂不懂？你照着設計稿作就完事了，別嗶嗶。」
「擦，缺個角的圓讓我怎麼作！？你聽我說，CSS只能畫圓，並且你這個環的兩端仍是圓的……」
「有沒有搞錯，這點小圖都作不出來，要不換個前端來跟我對接吧。」
做爲一個有尊嚴的前端工程師，那確定要證實本身！想一想有沒有什麼辦法吧。唔，那個Canvas是否是能夠畫畫？
做爲一個熟練操做ctrl + c和ctrl + v的前端工程師，那就去看看Canvas有沒有提供什麼API讓咱們ctrl + c的吧。

看看Canvas有沒有提供咱們想要的東西

官方文檔那些文縐縐的東西就不帶你們看了，這裏分享給你們一個不錯的Canvas教程。因爲咱們的目的是證實本身，趕忙翻了翻這個教程的目錄，立馬發現了一個標題《繪製標準圓弧》，這是否是咱們想要的東西呢？
拋開那些什麼複雜的圓弧什麼曲線，會發現一個API:context.arc(x,y,radius,startAngle,endAngle,anticlockwise)，其中startAngle以及endAngle是起始與結束的位置，它們的單位是弧度，那咱們只要利用好這兩位置，就能畫出一個不閉合的圓了！直觀點的圖：

趕忙試試畫一個不閉合的圓

codepen看看
GET！這就是咱們想要的樣子！這只是成功的第一步，看看跟效果圖的差異，咱們還差一個外圈框住這個綠色的圈。

在原來的基礎上再畫一個外圈框住

codepen看看
這簡直就是高保真還原設計圖嘛！剩下的事情就簡單啦，只須要讓這個綠色的圈能動起來就完事了！

動起來吧

這個動畫思路仍是比較明確的，無非就是一幀幀地讓內圈從一個位置轉到另外一個位置直至到達結束的位置：
codepen看看
到此爲止，你就證實了本身，找回前端工程師的尊嚴！走，打射雞獅去！