這次帶給大家html5 canvas動態實作餅狀圖步驟詳解，html5 canvas動態實作餅狀圖的注意事項有哪些，以下就是實戰案例，一起來看一下。
先來看效果圖
這裡並沒引用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的畫筆的座標定義為最初圓心的座標。
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是html5+canvas動態實現餅狀圖步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
