用canvas 画饼状图

<canvas id="cans"  height="800" width="1200" ></canvas>

 

<script>
　　function disToRad(n){ // 把角度转换为弧度
　　　　return n*Math.PI/180;
　　　　//π用PI表示，π=180°，所以1°=PI/180
　　}
　　window.onload=function(){
　　　　let cans=document.getElementById("cans"); //获取画布
　　　　let ctx=cans.getContext("2d"); //创建画板
　　　　let cx=150; //圆心x轴坐标
　　　　let cy=200; //圆心y轴坐标
　　　　let r=150; //圆半径

　　　　function pie(startAng,endAng,color){ // 画扇形
　　　　　　let nx,ny; //x轴初始位置坐标
　　　　　　ctx.beginPath(); //防止之前画好的部分受后面画的影响
　　　　　　ctx.moveTo(cx,cy); //画笔开始坐标(即圆的中心坐标)

　　　　　　nx=cx+Math.sin(disToRad(startAng))*r; //弧线初始点的x轴坐标
　　　　　　ny=cy-Math.cos(disToRad(startAng))*r;
　　　　　　ctx.lineTo(nx,ny); //设置终点坐标（弧线初始点坐标）
　　　　　　ctx.arc(cx,cy,r,disToRad(startAng-90),disToRad(endAng-90),false); //画扇形，弧度=度数-90
　　　　　　ctx.closePath(); //图形闭合
　　　　　　ctx.stroke(); //描边
　　　　　　ctx.fillStyle=color; //设置填充颜色
　　　　　　ctx.fill(); //填充
　　}
　　var data=[10,30,35,20,5];
　　let color=['red','pink','blue','yellow','orange'];
　　let sum=data.reduce(function(prev,current){
　　　　return prev+current; //求总和
　　})
　　let avgDegree=data.map(function(item){
　　　　return item/sum*360;
　　　　// 一个数据值所占用的角度
　　})
　　lastDegree=0; //设置初始度数
　　avgDegree.forEach(function(item,index){
　　　　pie(lastDegree,lastDegree+item,color[index]); //调用pie(),的分别循环换获取
　　　　lastDegree+=item;
　　})
}
</script>