canvas运动的圆饼-CSDN博客

本文链接：https://blog.csdn.net/NIHAOHAOHOA/article/details/117409085


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#myCanvas{
				border:1px solid red;
				transition:all 2s linear;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="600" height="600">您的浏览器不支持canvas</canvas>
		<script>
			var data = [
			        {
			            num: 100,
			            money:200,
			            color: 'red',
			            title:"一月"
			        },
			        {
			            num: 150,
			            money:300,
			            color: 'orange',
			            title:"二月"
			        },
			        {
			            num: 240,
			            money:300,
			            color: 'yellow',
			            title:"三月"
			        },
			        {
			            num: 300,
			            money:400,
			            color: 'green',
			            title:"四月"
			        },
			        {
			            num: 150,
			            money:340,
			            color: 'pink',
			            title:"五月"
			        },
			    ];
			var sun = 0;
			data.forEach(function(item){
				sun+=item.num
			})
			//console.log(150/sun,'sun')
			var canvas = document.querySelector('#myCanvas');
			var ctx = canvas.getContext('2d');
			var start = 0,end = 0;
			data.forEach(function(item,index){
				start = move(start,2*Math.PI*(item.num/sun)+start,item.color)
			})
			function move(start,end,color){
				console.log(end,'哈哈哈哈')
				// 距离
				var step = 0;
				var timer = null;
				timer = setInterval(function(){
					step+=0.01;
					if(start+step*2*Math.PI>=end){
						clearInterval(timer)
					}
					ctx.beginPath();
					ctx.moveTo(200,200);
					ctx.arc(200,200,100,start,start+step*2*Math.PI,false);
					ctx.fillStyle = color;
					ctx.fill();
				},50)
				return end
			}
			
			// 图例
			data.forEach(function(item,index){
				ctx.beginPath();
				ctx.rect(500,100+50*index,30,30)
				ctx.fillStyle = item.color;
				ctx.fill();
				ctx.textBaseline = 'middle;';
				ctx.fillText(item.title,550,115+50*index);
			})
		</script>
	</body>
</html>