注意審題，第一要快，不要太麻煩，首先可以拋棄canvas，能不用js盡量不用，第二要支持任意角度。
兩種方案和他們的缺點
以下兩種方案滿足要求
方案A：很久之前寫過一篇《簡單的css3 Loading動畫》，原理是利用兩個半圓旋轉的方式，可以生成任意角度的扇形；
方案B：近期在GitHub看到一個利用路徑裁剪的方式來生成扇形，Demo地址。
這兩種方式用來畫靜態的扇形都沒有什么問題，但畫動態的扇形，則不那么方便。
方案A，需要根據扇形角度判斷兩個半圓分別需要旋轉多少度；方案B更復雜一些，隨着扇形角度變化，路徑裁剪的參數個數也在變化，需要寫一套邏輯來判斷。
有沒有一種方案C，可以直接傳一個角度參數過去就行的？
方案C
先看Demo
核心代碼如下，angle是一個參數，表示扇形角度
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" >
<circle
r="50"
cx="100"
cy="100"
fill="transparent"
stroke="red"
stroke-width="100"
stroke-dasharray={100 * 3.1415926}
stroke-dashoffset={100 * 3.1415926 / 360 * (360 - angle)}
/>
</svg>
方案C原理
方案C利用svg來繪制扇形，對svg不熟悉的可以先花幾分鍾讀一讀基礎教程
這是一個圓心坐標位於（100, 100）半徑為50的圓形，描邊寬度為100。SVG不同於DOM，SVG的邊框是同時向內外延伸的，內部的邊框和它的內容重疊了，所以它渲染出來寬高不是150 * 150，而是100 * 100。將代碼中的fill改為orange，stroke改為半透明的紅色rgba(255, 0, 0, 0.2)，看看效果圖就明白了。
重點在於stroke-dasharray和stroke-dashoffset屬性。
stroke-dasharray屬性定義svg描邊為虛線，值越大，虛線間隔越大。
下圖stroke-dasharray分別為10和20
stroke-dashoffset屬性定義svg描邊的開頭距離起始位置的偏移量，值越大，距離起始位置越遠。
下圖stroke-dashoffset分別為50和100
重點來了，回到方案C的SVG圖形
當stroke-dasharray值剛好等於圓的周長時，渲染結果是這樣的
隨便給stroke-dashoffset賦一個值，比如100，渲染結果如下
OK，扇形出來了，只要stroke-dashoffset的值在(0, 圓形周長)這個開區間內，渲染出來的圖形就是扇形。
接下來只需要把角度參數angle和stroke-dashoffset關聯起來：
一個圓總共360度，每一度偏移量值X = 周長 / 360。再用X * angle就是實際角度對應的偏移量，當angle等於90，渲染出來的扇形實際上是270度
所以，最終的stroke-dashoffset計算方法應該調整為 周長 / 360 * (360 - angle)。
總結
方案C中，不管扇形角度是多少，都不需要寫任何邏輯判斷代碼，相對方案A和方案B使用起來更簡便一些。