canvas動態繪制餅狀圖，

當我們使用Echrts很Highcharts的時候，總是覺得各種統計圖表是多么神奇，今天我就用現代瀏覽器支持的canvas來繪制餅狀統計圖，當然僅僅是畫出圖並沒什么難度，但是統計圖一般都有輸入，根據不同的輸入來繪制，需要發揮你腦力。

1.canvas簡單使用

1.1先看我們的html，需要一個繪圖的區域

<canvas id="drawing" width="500px" height="500px"></canvas>

1.2獲取繪圖區域，並且判斷瀏覽器是否支持canvas繪圖

var drawing = document.getElementById('drawing')//獲取繪圖區域
if(drawing.getContext){
     context = drawing.getContext('2d')
}else{
　　alert（'瀏覽器不支持canvas'）
}

1.3介紹簡單的api（這里的context指的是上面獲取的繪圖區域）

　　context.beginPath() 繪圖開始，一個圖可以分多次繪制，例如餅狀圖每個小部分都是一次完整的繪制，為了填充不同顏色，都需要多次開始和結束

　　context.closePath() 本部分繪制結束

　　context.moveTo(100,100) 抬筆移動到100,100位置，過程中不留下痕跡

　　context.lineTo(100,100) 從某個起點繪制到100,100這個坐標的，

　　context.fill() 開始填充，可以先設置填充顏色，context.fillStyle = 'blue';設置填充色，然后在調用context.fill()開始填充本部分

　　context.stroke() 描邊，就是輪廓的顏色，可以先設置顏色，context.strokeStyle="red"，然后調用context.stroke()描邊

2.開始我們的封裝繪制方法

2.1開始封裝繪制方法

 /*下列插件傳遞json的格式{
　　　　　ele:ele 
 　　　　data:[1,2,3,4] }*/ function Circle(json) { this.ele = json.ele;//繪制區域元素 this.data = json.data;//輸入的數據 this.step = 0;//繪制的步驟，幾個數據，分幾次繪制 this.start=0;//其實位置初始化 this.end = 0;//借宿位置初始化 this.init(); //調用初始化方法  } Circle.prototype.init=function(){ if(this.ele.getContext){ //判斷知否支持canvas this.context = this.ele.getContext('2d') }else{ console.log('不支持canvas') } this.sum() //先統計數據和，以便得到每個數據的占比 this.drawing() //開始繪制  } Circle.prototype.drawing=function(){ if(this.step >= this.data.length){//超過數據個數，就停止繪制 return } this.math()//計算起點和終點 this.context.beginPath();//繪制開始 this.context.fillStyle = Circle.prototype.color();//填充顏色 this.context.moveTo(250,250)//繪制起點移動到的位置，moveTo就像抬筆到某處，過程中不留下痕跡 this.context.arc(250,250,160,this.start,this.end,false)//畫圓開始，屬性分別是('圓心X軸坐標','原型Y軸坐標','起點','終點',是否逆時針)

 this.context.lineTo(250,250)//再繪制直線到圓心，這樣形成封閉區域，才可以填充顏色 this.context.fill()//填充顏色 this.context.closePath();//關閉繪圖 this.step++;//接着下一步驟的繪制 this.drawing() } Circle.prototype.math = function(start,end){//每次繪制是計算起點和終點 this.start=this.end; this.end = this.start+this.data[this.step]/this.total*2*Math.PI;  } Circle.prototype.color=function(){//隨機顏色的生成 var color="#"; for(var i = 0;i < 6;i++){ color+= parseInt(Math.random()*17).toString(16); } return color; } Circle.prototype.sum = function(){//得到數據的總和，以便得到每個數據的占比 this.total = this.data.reduce(function(a, b){ return a + b; }); }

2.2調用方法

var drawing = document.getElementById('drawing')
var img =new Circle({
      ele:drawing,
      data:[1,2,3,4]
})

2.3查看效果圖，（因為我們的填充顏色是隨機的，所以每次刷新的餅狀圖每部分的顏色都會變化）

我的源碼地址在 https://github.com/jiangzhenfei/canvas/blob/master/circle.html