canvas实现圆饼图,柱状图,折线图(满满的干货)

最新推荐文章于 2022-08-11 13:45:00 发布

是小王啊i

最新推荐文章于 2022-08-11 13:45:00 发布

阅读量727

点赞数 2

分类专栏： html5+css3 文章标签： html canvas html5

本文链接：https://blog.csdn.net/qq_45378970/article/details/108913803

版权

html5+css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

canvas画图

圆饼图

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#a1{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="a1" width="500" height="500"></canvas>
		<script type="text/javascript">
			var a1=document.getElementById('a1');
			var canvas=a1.getContext('2d');
			var data = [{
			           "value": .2,
			           "color": "red",
			           "title": "数学"
			       },{
			           "value": .4,
			           "color": "blue",
			           "title": "英语"
			       },{
			           "value": .3,
			           "color": "green",
			           "title": "语文"
			       },{
			           "value": .1,
			           "color": "pink",
			           "title": "物理"
			       }];
			//圆形坐标	   
			var x0=200;
			var y0=200;
			//半径r
			var r0=100;
			//开始的角度
			var angle=-90;
			for(var i=0;i<data.length;i++){
				canvas.beginPath();
				canvas.moveTo(x0,y0);
				var angle1=data[i].value*360;
				//开始角度 结束角度
				var start=angle*Math.PI/180;
				var end=(angle+angle1)*Math.PI/180;
				canvas.arc(x0,y0,r0,start,end,false);
				canvas.fillStyle=data[i].color;
				canvas.fill();
				//绘制文字
				var text=data[i].title;
				//绘制文字放置的角度
				var textAngle=angle+1/2*angle1;
				//文字要放置的坐标
				var x,y;
				x=x0+Math.cos(textAngle*Math.PI/180)*(r0+20);
				y=y0+Math.sin(textAngle*Math.PI/180)*(r0+20);
				//如果文字在圆形的左侧
				if(textAngle>90 && textAngle<270) {
					canvas.textAlign='end';
				}
				canvas.fillText(text,x,y);
				
				//不停的改变初始角度
				angle+=angle1;
			}
		</script>
	</body>
</html>

柱状图

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#a1{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="a1" width="600" height="600"></canvas>
		<script type="text/javascript">
			var a1=document.getElementById('a1');
			var canvas=a1.getContext('2d');
			//原点坐标 x，y
			var x=100;y=400;
			canvas.fillText(0,x,y+20);
			
			//x轴
			canvas.beginPath();
			canvas.moveTo(x,y);
			canvas.lineTo(400,400);
			canvas.lineTo(400-20,400-20);
			//起点
			canvas.moveTo(400,400);
			canvas.lineTo(400-20,400+20);
			canvas.strokeStyle='blue';
			canvas.stroke();
			canvas.fillText('x',400,420);
			canvas.textAlign='left';
			//y轴
			canvas.beginPath();
			canvas.moveTo(x,y);
			canvas.lineTo(100,100);
			canvas.lineTo(100-20,100+20);
			canvas.moveTo(100,100);
			canvas.lineTo(100+20,100+20);
			canvas.strokeStyle='red';
			canvas.stroke();
			canvas.fillText('y',100,80);
			canvas.textAlign='right';
			
			canvas.beginPath();
			canvas.moveTo(x+50,y);
			canvas.lineTo(x+50,200);
			canvas.lineTo(x+80,200);
			canvas.lineTo(x+80,y);
			canvas.fillStyle='red';
			canvas.fill();
			canvas.fillText('数学',x+75,180);
			canvas.textAlign='center';
			
			canvas.beginPath();
			canvas.moveTo(x+100,y);
			canvas.lineTo(x+100,300);
			canvas.lineTo(x+130,300);
			canvas.lineTo(x+130,y);
			canvas.fillStyle='orange';
			canvas.fill();
			canvas.fillText('语文',x+100+15,290);
			canvas.textAlign='center';
			
			canvas.beginPath();
			canvas.moveTo(x+150,y);
			canvas.lineTo(x+150,200);
			canvas.lineTo(x+180,200);
			canvas.lineTo(x+180,y);
			canvas.fillStyle='green';
			canvas.fill();
			canvas.fillText('化学',x+150+15,180);
			canvas.textAlign='center';
		</script>
	</body>
</html>

折线图

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#a1{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="a1" width="600" height="600"></canvas>
		<script type="text/javascript">
			var a1=document.getElementById('a1');
			var canvas=a1.getContext('2d');
			//原点坐标 x，y
			var x=100;y=400;
			canvas.fillText(0,x,y+20);
			
			//x轴
			canvas.beginPath();
			canvas.moveTo(x,y);
			canvas.lineTo(400,400);
			canvas.lineTo(400-20,400-20);
			//起点
			canvas.moveTo(400,400);
			canvas.lineTo(400-20,400+20);
			canvas.strokeStyle='blue';
			canvas.stroke();
			canvas.fillText('x',400,420);
			canvas.textAlign='left';
			//y轴
			canvas.beginPath();
			canvas.moveTo(x,y);
			canvas.lineTo(100,100);
			canvas.lineTo(100-20,100+20);
			canvas.moveTo(100,100);
			canvas.lineTo(100+20,100+20);
			canvas.strokeStyle='red';
			canvas.stroke();
			canvas.fillText('y',100,80);
			canvas.textAlign='right';
			
			//折线图
			canvas.beginPath();
			canvas.moveTo(x+20,y-20);
			canvas.lineTo(x+60,y-40);
			canvas.lineTo(x+80,y-10);
			canvas.lineTo(x+100,y-60);
			canvas.lineTo(x+120,y-80);
			canvas.lineTo(x+150,y-100);
			canvas.lineTo(x+180,y-120);
			canvas.strokeStyle='#000';
			canvas.stroke();
		</script>
	</body>
</html>

是小王啊i

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
canvas实现圆饼图,柱状图,折线图(满满的干货)

canvas画图圆饼图柱状图折线图圆饼图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #a1{ border: 1px solid red; } </style> </head> <body> &lt
复制链接

扫一扫