Canvas根据已知数据绘制饼状图

最新推荐文章于 2024-03-12 20:24:21 发布

No25_Xu

最新推荐文章于 2024-03-12 20:24:21 发布

阅读量352

点赞数

分类专栏： Canvas 文章标签： canvas css3

本文链接：https://blog.csdn.net/No25_Xu/article/details/83513214

版权

Canvas 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		canvas {
			border: 1px solid #ddd;
			margin: 100px;
		}
	</style>
</head>

<body>
	<canvas width="600" height="400"></canvas>
	<script type="text/javascript">
		var myCanvas = document.querySelector("canvas");
		var ctx = myCanvas.getContext("2d");
		
		var data = [5, 30, 10, 5];
		var angleList = [];
		var total = 0;

		data.forEach(function(item, i) {
			total += item;
		})
		/*转化成弧度*/
		data.forEach(function(item, i) {
			var angle = Math.PI * 2 * (item / total);
			angleList.push(angle);
		})
		/*随机颜色*/
		var getRandomColor = function() {
			var r = Math.floor(Math.random() * 256);
			var g = Math.floor(Math.random() * 256);
			var b = Math.floor(Math.random() * 256);
			return "rgb(" + r + "," + g + "," + b + ")";
		}
		/*根据弧度绘制扇形*/
		var w = ctx.canvas.width;
		var h = ctx.canvas.height;
		var x0 = w / 2;
		var y0 = h / 2;
		var startAngle = 0;
		angleList.forEach(function(item, i) {
			var endAngle = startAngle + item;
			ctx.beginPath();
			ctx.moveTo(x0, y0);
			ctx.arc(x0, y0, 150, startAngle, endAngle);
			ctx.fillStyle = getRandomColor();
			ctx.fill();
			startAngle = endAngle;
		})
	</script>
</body>

No25_Xu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Canvas根据已知数据绘制饼状图

&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; canvas { border: 1px solid #ddd; margin: 100px; } &lt;/style&gt;&
复制链接

扫一扫