Canvas画扇形统计图

window.onload=function() {

var data=[0.2,0.4,0.1,0.2,0.1];//五个扇形的占比

var dataColor=["#F8ACAC",'#9185F8','#FD7ADF','#65E0F9','#6EF668'];//五个扇形的颜色

var angleStart=0,angleEnd,angle;

var Q3Canvas=document.getElementById('Q3-canvas');

var ctx=Q3Canvas.getContext("2d");

for(var i=0;i

angle=2*Math.PI*data[i];

angleEnd=angleStart+angle;

ctx.beginPath();

ctx.fillStyle=dataColor[i];

ctx.arc(Q3Canvas.width/2,Q3Canvas.height/2,Q3Canvas.width/2,angleStart,angleEnd);

ctx.lineTo(Q3Canvas.width/2,Q3Canvas.height/2);

ctx.closePath();

ctx.fill();

angleStart=angleEnd;//设置画下一个扇形的起点位置

};

};