canvas繪制餅圖-細(xì)節(jié)詳解
canvas是前端繪制統(tǒng)計(jì)圖的首選工具，提升用戶體驗(yàn)的金鑰匙。餅圖統(tǒng)計(jì)圖就是經(jīng)典的例子。
先看效果圖，這里是原生HTML+JavaScript+canvas完成的。
繪制常用canvas的api。
繪制餅圖核心邏輯
利用arc畫圓，每部分餅圖以該圓的圓心為中心，由弧度控制圓的大??；
上一個(gè)餅圖部分結(jié)束弧度是下一個(gè)餅圖部分的起始弧度；
直角三角函數(shù)：sinA = a / c; cosA = b / c，餅圖弧度計(jì)算用到；
把數(shù)量轉(zhuǎn)化為弧度公式：扇形部分?jǐn)?shù)量 / 總量 * Math.PI * 2(圓的一周是360度)
繪制伸出線點(diǎn)坐標(biāo)公式：
完整代碼
代碼都有注釋，感興趣的伙伴可以仔細(xì)看一看，或者把代碼粘貼到html文件內(nèi)部運(yùn)行看效果，在看源碼，基本上就看明白了。
以上就是canvas繪制餅圖的全部內(nèi)容，感謝查閱。文章錯(cuò)誤之處，感謝留言糾正。
標(biāo)簽：
