先來看效果圖

這里并沒引用jquery等第三方庫，只是用dom操作和canvas的特性編寫的。

canvas畫圓大體分為實心圓和空心圓。

根據需求分析知道該圓為實心圓。

1.先用canvas畫實心圓

//偽代碼var canvas = document.createElement( canvas var ctx = canvas.getContext( 2d ctx.beginPath();ctx.arc(圓心x軸坐標,圓心y軸坐標,半徑,開始角,結束角);ctx.fillStyle = green ctx.closePath();ctx.fill();

2.根據不同顏色繪制餅狀圖

//偽代碼var canvas = document.createElement( canvas var ctx = canvas.getContext( 2d ctx.beginPath();ctx.arc(圓心x軸坐標,圓心y軸坐標,半徑,綠色開始角,綠色結束角);ctx.fillStyle = green ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(圓心x軸坐標,圓心y軸坐標,半徑,紅色開始角,紅色結束角);ctx.fillStyle = red ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(圓心x軸坐標,圓心y軸坐標,半徑,黃色開始角,黃色結束角);ctx.fillStyle = yellow ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(圓心x軸坐標,圓心y軸坐標,半徑,紫色開始角,紫色結束角);ctx.fillStyle = purple ctx.closePath();ctx.fill();

3.動態繪制餅狀圖

動態繪制圓網上普遍推薦三種方法：requestAnimationFrame、setInterval（定時）、還有動態算角度的。

這里我用的是第一種requestAnimationFrame方式。

在編寫的過程中發現一個問題，就是動態畫圓時并不是以圓心的坐標畫的。為了解決這一問題，需要在每次畫圓時重新將canvas的畫筆的坐標定義為最初圓心的坐標。

 !DOCTYPE html  html  head  meta charset= utf-8  title /title  style  #graph {/* border: 1px solid black; height: 100%; width: 100%; box-sizing: border-box;*/ /style  /head  body  p id= circle >
相信看了本文案例你已經掌握了方法，更多精彩請關注php 其它相關文章！
推薦閱讀：
H5+WebWorkers多線程開發使用詳解
H5離線應用與客戶端存儲使用詳解
以上就是html5+canvas動態實現餅狀圖步驟詳解的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。