简单的饼状图

<canvas></canvas>
<script type="text/javascript">
var canvas=document.querySelector('canvas');
canvas.width=600;
canvas.height = 700;
canvas.style.border = '1px solid #000';
var ctx=canvas.getContext('2d');


var data=[{
"value":.4,
"color":"red"
},{
"value":.2,
"color":"blue"
},{
"value":.3,
"color":"green"
},{
"value":.1,
"color":"grey"

}];

//第一种

var beginAngle=0;
var endAngle=0;
var data1=data[0];


ctx.beginPath();
ctx.moveTo(300,300);
ctx.arc(300,300,200,beginAngle*Math.PI/180,360*data1.value*Math.PI/180);
ctx.fillStyle=data1.color;
ctx.fill();


var data2=data[1];
beginAngle=endAngle+360*data1.value;
endAngle=beginAngle+360*data2.value;
ctx.beginPath();
ctx.moveTo(300,300);
ctx.arc(300,300,200,beginAngle*Math.PI/180,endAngle*Math.PI/180);
ctx.fillStyle=data2.color;
ctx.fill();


var data3=data[2];
beginAngle=endAngle;
endAngle=endAngle+360*data3.value;
ctx.beginPath();
ctx.moveTo(300,300);
ctx.arc(300,300,200,beginAngle*Math.PI/180,endAngle*Math.PI/180);
ctx.fillStyle=data3.color;
ctx.fill();


var data4=data[3];
beginAngle=endAngle;
endAngle=endAngle+360*data4.value;
ctx.beginPath();
ctx.moveTo(300,300);
ctx.arc(300,300,200,beginAngle*Math.PI/180,endAngle*Math.PI/180);
ctx.fillStyle=data4.color;

ctx.fill();

//第二种遍历

var w=300;
var beginAngle=0;
var endAngle=0;
for(var i=0;i<data.length;i++){
ctx.beginPath();
ctx.moveTo(w,w);
endAngle +=data[i].value*360;
ctx.arc(w,w,200,beginAngle*Math.PI/180,endAngle*Math.PI/180);
ctx.fillStyle=data[i].color;
ctx.fill();
beginAngle=endAngle;
}

</script>