canvas学习

最新推荐文章于 2025-04-18 14:30:56 发布

炎炽枫

最新推荐文章于 2025-04-18 14:30:56 发布

阅读量153

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_39991986/article/details/87861556

本文分享了一种使用HTML5 Canvas绘制扇形图的方法，重点介绍了如何在图形中精确放置文字，利用极坐标系和循环复用技巧简化代码，实现美观的数据可视化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
    <link rel="stylesheet" href="css/shanxing.css">
<style type="text/css">
canvas {
    border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="tutorial" width="300" height="300"></canvas>
<script type="text/javascript">
function draw(){
	var colorList=["rgb(98,160,255)","rgb(91,206,51)","rgb(244,185,115)","rgb(255,106,213)"];
    var perList=[0.3,0.3,0.2,0.2];
	var wordList=["1个月","3个月","6个月","12个月"]
	var beginRadian=0;
	var canvas = document.getElementById('tutorial');
    if(!canvas.getContext) return;
      var ctx = canvas.getContext("2d");
      //开始代码
	ctx.strokeStyle = "rgb(255,255,255)";
	for(var i=0;i<4;i++){
		ctx.fillStyle =colorList[i];
		ctx.beginPath();
		ctx.arc(75,50,50,beginRadian,beginRadian+2*perList[i]*Math.PI,false);
		ctx.lineTo(75,50);
		ctx.closePath();
		ctx.fill();
		ctx.stroke();
		ctx.fillRect(30*i,110,5,5);
		ctx.fillText(wordList[i], 30*i+5, 115);
		ctx.fillStyle ="rgb(255,255,255)";	
		ctx.fillText(perList[i]*100+'%', 75+25*Math.cos(beginRadian+perList[i]*Math.PI)-10, 50+25*Math.sin(beginRadian+perList[i]*Math.PI)+5);
		beginRadian+=2*perList[i]*Math.PI;
	}
}
draw();
</script>
</body>
</html>