原文地址：http://www.2cto.com/kf/201108/100251.html
HTML5引入Canvas元素，用於圖形的繪制，我們可以僅僅基於HTML和JavaScript就能繪制出原本可能需要第三方組件的圖形。因為做數據統計比較多，那么就用畫餅圖做為示例來說明。之前繪制餅圖可以使用JfreeChart組件，或者Flash組件FusionCharts Free和Open Flash Chart，這些組件的使用之前也介紹過，可以參閱以前的文章。本部分僅來介紹HTML5的Canvas繪制餅圖。
餅圖的基礎是原型，那么我們先來看看如何使用Canvas繪制原型。當然這很簡單了，首先編寫HTML代碼，如下：
Html代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 Demo</title> </head> <body> <canvas id="circle" width="400" height="300">您的瀏覽器暫不支持Canvas</canvas> </body> </html> HTML僅僅定義顯示的內容，如何畫圖還要借助JavaScript了，這也很簡單，我們來看一下： Js代碼 <script type="text/javascript"> function drawCircle(){ var canvas = document.getElementById("circle"); var ctx = canvas.getContext("2d"); ctx.fillStyle = '#77D1F6'; ctx.beginPath(); ctx.moveTo(200,150); ctx.arc(200,150,150,0,Math.PI*2,false); ctx.fill(); } drawCircle(); </script>
我們就在html文件中使用<script>標簽來寫即可，下面來解釋這段代碼。首先通過getElementById()方法獲取到我們的canvas元素，然后從canvas中獲取上下文環境，我們繪制的是2d圖形，緊接着是填充的效果，我們定義一種顏色來填充。可能這里有人想到了strokeStyle，這個是繪制路徑的顏色，而不是填充的顏色了。然后調用beginPath()開始繪制，首先將畫筆移動到圓心處，就是從圓心開始繪制路徑，當然這句可以不加，畫圓的話不需要每次都回圓心，但是畫餅圖就需要了了，所以為以后考慮，加上也沒事。這里的圓心坐標是（200，150），就是距離左上角向右200個像素，向下150個像素的位置。
之后的arc方法就是畫圓的了。參數的含義為：前兩個是圓心坐標，上面解釋過了。第三個參數是半徑大小，我們定義canvas的寬度為300像素，這里用半徑就是300的一半，第四個參數是圓周起始位置，這就很有說頭了，也涉及到一些幾何知識，我們來看一張圖：
0 PI就是起始位置了，沿順時針路線，分別是0.5 PI（正下方），1 PI和1.5 PI（正上方），這個為我們以后畫餅圖提供了扇形范圍的依據。
第五個參數是弧長，就是我們圓弧的范圍，Math.PI*2就是整個圓了，Math.PI是半圓，這沒什么好說的，完全的數學知識。第六個參數是個布爾值，就是確定是順時針還是逆時針，這里false是順時針。基礎的內容就說完了，我們來看一下效果：
我們可以使用FireFox，Chrome，Safari或Opera來查看效果，IE只會出一行字。畫圓很簡單，那么扇形就是要計算弧長的圖形，扇形組合成一個整圓，就是我們要的餅圖了。我們一步一步來，開始畫扇形。做數據統計時，我們喜歡用百分比，那么將整個圓周視為100份，我們計算百分數。將JavaScript代碼調整如下：
Js代碼
<script type="text/javascript"> var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"]; var data = [5,30,15,30,20]; function drawCircle(){ var canvas = document.getElementById("circle"); var ctx = canvas.getContext("2d"); var startPoint=0; for(var i=0;i<data.length;i++){ ctx.fillStyle = color[i]; ctx.beginPath(); ctx.moveTo(200,150); ctx.arc(200,150,150,startPoint,startPoint+Math.PI*2*(data[i]/100),false); ctx.fill(); startPoint+=Math.PI*2*(data[i]/100); } } drawCircle(); </script>
解釋一下：定義了兩個全局變量，color和data用於放置數據和對應的扇形區域的顏色。drawCircle()方法中加入循環，就是根據數據和顏色來進行自動填充，此時就必須使用moveTo()方法來每次回到圓心了，否則就不是扇形了，可以自行去測試。然后對arc方法進行調整，可以發現，第四，第五參數調整，就是扇形其實位置和結束位置了，這里我們定義的startPoint是0，就是從左水平點開始畫圖，為順時針方向。畫圖的弧長是按百分數計算，也就是data數組中的每一項除以100得出的結果，當然data數組本身的和也是100。
之后進行扇形區域的填充，使用fill()方法即可，我們看到如下結果：
到此為止，我們就畫好扇形了，細心的人會發現，我們每個扇形連接處都有一道白線，產生的這個問題我們之前說過，就是strokeStyle和stroke方法這里沒有用，那么沒有對畫線的路徑進行填充，而畫扇形必須要回圓心，那么就需要對畫線的路徑進行相應填充，在相應位置加上這兩個方法，白線就沒有了。
最后，我們要求，從正上方逆時針開始繪圖，該如何做？將起始位置定義為1.5PI，arc方法最后一個參數為true，每次的增量不能加，要減，就可以了，代碼修改為：
Js代碼
<script type="text/javascript"> var color = ["#27255F","#2F368F","#3666B0","#2CA8E0","#77D1F6"]; var data = [5,30,15,30,20]; function drawCircle(){ var canvas = document.getElementById("circle"); var ctx = canvas.getContext("2d"); var startPoint = 1.5 * Math.PI; for(var i=0;i<data.length;i++){ ctx.fillStyle = color[i]; ctx.strokeStyle = color[i]; ctx.beginPath(); ctx.moveTo(200,150); ctx.arc(200,150,150,startPoint,startPoint-Math.PI*2*(data[i]/100),true); ctx.fill(); ctx.stroke(); startPoint -= Math.PI*2*(data[i]/100); } } drawCircle(); </script>
我們再來看看效果：
Canvas繪制餅圖掌握這么多基本就夠了，可以處理常見的數據統計了，只要注意這里我們扇形划分是按照百分比進行的，那么你可以根據自己的需求靈活處理。對於其實位置和方向的調整也很簡單，調整幾個參數即可。
第二部分將結合CSS3來制作一個完整的示例。歡迎交流，本示例系作者的實踐探究，希望對使用者有用。