<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js+html5 canvas学院各院部饼状分布图特效</title>
</head>
<body>
<div id="div1"></div>
<script>
//数据
var data={
title:"xxxx学院各院部分布图",
dataList:
[
{name:"管理学院",rate:0.22,color:"#f60"},
{name:"设计学院",rate:0.12,color:"#64f"},
{name:"音乐学院",rate:0.11,color:"#0f6"},
{name:"演艺学院",rate:0.1,color:"#5d4"},
{name:"学前教育学院",rate:0.36,color:"#fcc"},
{name:"中转部",rate:0.11,color:"#d45"},
]
}
//画布
var cvs=document.createElement("canvas");
var div1=document.getElementById("div1");
div1.appendChild(cvs);
cvs.width=760;
cvs.height=500;
cvs.style="display:block;margin:0 auto;background:#eee;";
var ctx=cvs.getContext("2d");
//绘制标题
ctx.font="16px 黑体";
ctx.textAlign="center";
ctx.textBaseline="midddle";
ctx.fillText(data.title,cvs.width/2,25);
//绘制左边实例图标
ctx.textAlign="left";
ctx.font="12px 微软雅黑";
ctx.textBaseline="bottom";
for(var i=0;i<data.dataList.length;i++)
{
ctx.beginPath();
ctx.arc(30,50+20*i,10,1.5*Math.PI-0.2*Math.PI,1.5*Math.PI+0.2*Math.PI,false);
ctx.lineWidth=5;
ctx.strokeStyle=data.dataList[i].color;
ctx.stroke();
ctx.fillText(data.dataList[i].name,45,50+20*i);
}
//绘制饼图
var startAngle=1.5*Math.PI;
var endAngle,lineAngle;
for(var j=0;j<data.dataList.length;j++)
{
ctx.beginPath();
ctx.moveTo(500,250);
endAngle=startAngle+data.dataList[j].rate*2*Math.PI;
ctx.arc(500,250,100,startAngle,endAngle,false);
ctx.closePath();
ctx.fillStyle=data.dataList[j].color;
ctx.fill();
startAngle=endAngle;
lineAngle=endAngle-data.dataList[j].rate*Math.PI-1.5*Math.PI;
ctx.beginPath();
ctx.moveTo(500+100*Math.sin(lineAngle),250-100*Math.cos(lineAngle));
ctx.lineTo(500+120*Math.sin(lineAngle),250-120*Math.cos(lineAngle));
ctx.textBaseline="midddle";
if(lineAngle<=Math.PI)
{
ctx.lineTo(500+120*Math.sin(lineAngle)+15,250-120*Math.cos(lineAngle));
ctx.textAlign="left";
ctx.fillText(data.dataList[j].name,500+120*Math.sin(lineAngle)+20,250-120*Math.cos(lineAngle));
}
else
{
ctx.lineTo(500+120*Math.sin(lineAngle)-15,250-120*Math.cos(lineAngle));
ctx.textAlign="right";
ctx.fillText(data.dataList[j].name,500+120*Math.sin(lineAngle)-20,250-120*Math.cos(lineAngle));
}
ctx.lineWidth=1;
ctx.strokeStyle=data.dataList[j].color;
ctx.stroke();
}
//生长动画
var overOver=document.createElement('canvas');
div1.appendChild(cvsOver);
cvsOver.width=cvs.width;
cvsOver.height=cvs.height;
div1.style.position="relative";
cvsOver.style.position="absolute";
cvsOver.style.top=0;
cvsOver.style.left=0;
</script>
</body>
</html>
