<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas绘制扇形</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var data =[{
"value":.2,
"color":'red',
"title":"应届生"
},{ "value":.3,
"color":"blue",
"title":"社会生"
},{
"value":.4,
"color":"green",
"title":"复读生"
},{
"value":.1,
"color":"pink",
"title":"借读生"
},];
var startangle= -90; //从-90度开始绘制
for(var i=0;i<data.length;i++){
ctx.beginPath();
ctx.moveTo(300,300);//定义一个圆心点
var angle = data[i].value*360; //绘制data扇形的角度
ctx.fillStyle = data[i].color;//填充扇形颜色
var beginangle= startangle*Math.PI/180;//把角度转为弧度，起始弧度
var endangle = (startangle+angle)*Math.PI/180;//结束弧度
ctx.arc(300,300,150,beginangle,endangle);
ctx.fill();
//绘制文字
var text = data[i].title+data[i].value*100+"%";
//文字的角度
var textangle = startangle + 1/2*angle;
var x,y;//定义文字的坐标
x = 300+Math.cos(textangle*Math.PI/180)*(150+20);//300为圆心点，150为半径
y = 300+Math.sin(textangle*Math.PI/180)*(150+20);
//对齐最后一个文字
if(textangle>90&&textangle<270){
ctx.textAlign = 'end'
}
ctx.fillText(text,x,y);
ctx.fill();
startangle+=angle;//下一次绘制的起始角度
}
</script>
</body>
</html>
