用canvas繪制的餅狀圖，6等分，顏色隨機

 都說程序員懶，生活還是不能懶的，比如洗頭、洗臉，當然也包括是分享咯。下面分享一下我用H5的新標簽canvas繪制的餅狀圖，顏色是隨機生成的，動態生成6等分，我還做了隨機生成數據的，

配上文字，每份所占的比例就顯而意見。，這點用在分析數據還是挺好的。圖片如下;

canvas 是 HTML5 提供的一個用於展示繪圖效果的標簽. canvas 原意畫布, 帆布. 在 HTML 頁面中用於展示繪圖效果. 最早 canvas 是蘋果提出的一個方案, 今天已經在大多數瀏覽器中實現.。

基本使用語法：

1. 使用 canvas 標簽, 即可在頁面中開辟一格區域. 可以設置其 width 和 height 設置該區域的尺寸.
2. 默認 canvas 的寬高為 300 和 400.
3. 不要使用 CSS 的方式設置寬高, 應該使用 HTML 屬性.
4. 如果瀏覽器不支持 canvas 標簽, 那么就會將其解釋為 div 標簽. 因此常常在 canvas 中嵌入文本, 以提示用戶瀏覽器的能力.
5. canvas 的兼容性非常強, 只要支持該標簽的, 基本功能都一樣, 因此不用考慮兼容性問題.
6. canvas 本身不能繪圖. 是使用 JavaScript 來完成繪圖. canvas 對象提供了各種繪圖用的 api.

繪圖步驟

1. 獲得 canvas 對象.
2. 調用 getContext 方法, 提供字符串參數 '2d'.
3. 該方法返回 CanvasRenderingContext2D 類型的對象. 該對象提供基本的繪圖命令.
4. 使用 CanvasRenderingContext2D 對象提供的方法進行繪圖.
5. 基本繪圖命令
   • 設置開始繪圖的位置: context.moveTo( x, y ).
   • 設置直線到的位置: context.lineTo( x, y ).
   • 描邊繪制: context.stroke().
   • 填充繪制: context.fill().
   • 閉合路徑: context.closePath().

   •  繪制圓弧

     語法: CanvasRenderingContext2D.arc( x, y, radius. startAngle. endAngle, anticlockwise )

     描述:

     1. 該方法用於繪制一段弧, 配合開始點的位置 與 stroke 方法或 fill 方法可以繪制扇形.
     2. 方法中的前兩個參數 x, y 表示繪制圓弧的圓心坐標.
     3. 參數 radius 表示圓弧半徑, 單位為弧度.
     4. 參數 startAngle 與 endAngle 表示開始到結束的角度. 角度以水平向右為 0 弧度, 順時針為正方向.
     5. 參數 anticlockwise 表示是否采用默認的正向角度, 如果傳入 true 表示逆指針為正. 該參數可選.