Canvas扇形

最新推荐文章于 2024-08-08 19:28:29 发布

吃瓜群众欢乐多

最新推荐文章于 2024-08-08 19:28:29 发布

阅读量813

点赞数 1

文章标签： canvas

本文链接：https://blog.csdn.net/sinat_36146776/article/details/53264308

版权

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Canvas案例-</title>
	</head>
<body>

	<div id="container">
		<canvas id="cavsElem">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
	</div>

	<script>
		(function(){
			var canvas = document.querySelector('#cavsElem');
			var ctx = canvas.getContext('2d');
			var data = [{
				"value": .2,
				"color": "red",
				"title": "应届生"
			},{
				"value": .3,
				"color": "blue",
				"title": "社会招生"
			},{
				"value": .4,
				"color": "green",
				"title": "老学员推荐"
			},{
				"value": .1,
				"color": "#ccc",
				"title": "公开课"
			},];

			canvas.width=600;
			canvas.height=600;
			canvas.style.border="1px solid #000";

			var x=300,y=300,r=200,temp=-90;//temp起始位置
			for(var i=0;i<data.length;i++){
				ctx.beginPath();
				ctx.moveTo(x,y);
				var angle=data[i].value*360;
				var startAngle=temp*Math.PI/180;
				var endAngle=(angle+temp)*Math.PI/180;
				ctx.arc(x,y,r,startAngle,endAngle,false);
				ctx.fillStyle=data[i].color;
				ctx.fill();
				temp+=angle;
			}
		}());
	</script>
</body>
</html>