canvas画布--动态饼形图

代码清单：

1、index.js文件：

var c=document.getElementById("canvas6");
	var ctx=c.getContext("2d");
    //获取画布中心为圆心
	var x=c.width/2;
	var y=c.height/2;
	//初始速度为2°
	var speed=2/360*2*Math.PI;
	var setArr=[
		{
			scale:0.2*2*Math.PI,
			color:"yellow"
		},
		{
			scale:0.35*2*Math.PI,
			color:"blue"
		},
		{
			scale:0.25*2*Math.PI,
			color:"red"
		},
		{
			scale:0.15*2*Math.PI,
			color:"orange"
		},
		{
			scale:0.05*2*Math.PI,
			color:"purple"
		}
	];
	//参数依次为开始角度，结束角度，饼环颜色，饼圆大径，饼圆内径，饼圆圆心坐标
	function drawDonuts(startAngle,endAngle,color,Mr,Sr,x,y){
		ctx.beginPath();
		ctx.moveTo(x,y);
		ctx.strokeStyle="#fff";
		ctx.fillStyle=color;
		ctx.lineTo(x+Mr*Math.cos(startAngle),y+Mr*Math.sin(startAngle));
		ctx.arc(x,y,Mr,startAngle,endAngle);
		ctx.lineTo(x,y);
		ctx.fill();
		
		ctx.beginPath();
		ctx.moveTo(x,y);
		ctx.strokeStyle="#fff";
		ctx.fillStyle="#fff";
		ctx.lineTo(x+Sr*Math.cos(startAngle),y+Sr*Math.sin(startAngle));
		ctx.arc(x,y,Sr,startAngle,endAngle);
		ctx.lineTo(x,y);
		ctx.stroke();
		ctx.fill();
	}
	//静态饼图
	// var startAngle=0;
	// var endAngle=0;
	// for(var i=0;i<setArr.length;i++){
	// 	endAngle+=setArr[i].scale;
	// 	drawDonuts(startAngle,endAngle,setArr[i].color,200,100,x,y);
	// 	startAngle=endAngle;
	// }

	//动态饼图
	var startAngle=0;
	var endAngle=0;
	var dataArr=[0];
	var sum=0;
	for(var i=0;i<setArr.length;i++){
		sum+=setArr[i].scale;
		dataArr.push(sum);
	}
	timer1=setInterval(function(){
		endAngle+=speed;
		if(endAngle>=2*Math.PI){
			clearInterval(timer1);
		}
		for(var i=1;i<dataArr.length;i++){
			if(endAngle>=dataArr[i-1] && endAngle<=dataArr[i]){
				drawDonuts(startAngle,endAngle,setArr[i-1].color,200,100,x,y);
			}
		}
		startAngle=endAngle-0.01;//消除小数影响
	},16);

2、index.html 文件：

<div class="box">
	<canvas id="canvas6" width="1600" height="600"></canvas>
</div>

3、index.css文件：

#canvas6{
	border:1px solid blue;
	width: 100%;
}

4、代码中牵涉数学运算数据理解图：

5、最终显示结果为：