canvas 环形饼状图_canvas动态绘制饼状图，

当我们使用Echrts很Highcharts的时候，总是觉得各种统计图表是多么神奇，今天我就用现代浏览器支持的canvas来绘制饼状统计图，当然仅仅是画出图并没什么难度，但是统计图一般都有输入，根据不同的输入来绘制，需要发挥你脑力。

1.canvas简单使用

1.1先看我们的html，需要一个绘图的区域

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]

}*/

functionCircle(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);

}returncolor;

}

Circle.prototype.sum= function(){//得到数据的总和，以便得到每个数据的占比

this.total = this.data.reduce(function(a, b){return a +b;

});

}

2.2调用方法

var drawing = document.getElementById('drawing')var img =newCircle({

ele:drawing,

data:[1,2,3,4]

})

2.3查看效果图，(因为我们的填充颜色是随机的，所以每次刷新的饼状图每部分的颜色都会变化)