前端---HTML5如何制作一个折线图

最新推荐文章于 2024-05-31 17:00:21 发布

lbxxzt

最新推荐文章于 2024-05-31 17:00:21 发布

阅读量2.5w

点赞数 6

分类专栏：前端文章标签：绘制折线图用canvas绘图描绘坐标图 x y轴

本文链接：https://blog.csdn.net/weixin_42504145/article/details/82821075

版权

前端专栏收录该内容

35 篇文章 2 订阅

订阅专栏

在学习如何制作折线图,我们先学习一下canvas元素中CanvasRenderingContext2D对象提供的相关方法,通过使用坐标表换,开发者无须繁琐计算每个点的坐标,只需对坐标系整体表换即可.

CanvasRenderingContext2D提供了如下的方法进行坐标变换:

translate(double dx,double dy):平移坐标系统.该方法相当于把原来位于(0,0)位置的坐标远点平移到(dx,dy)点.在平移后的坐标系统上绘制图形时,所有坐标点的X坐标都相当于增加了dx,所有点的Y坐标都相当于增加了dy.

scale(double sx,double sy):缩放坐标系统.该方法控制坐标系统水平方向上缩放sx,垂直方向上缩放sy.在缩放后的坐标系统上绘制图形时,所有有坐标点的X坐标都相当与乘以了sx因子,所有点的Y坐标都相当于乘以了sy因子.

rotate(double angle):旋转坐标系统.该方法控制系统旋转angle弧度.在旋转后的坐标系统上绘制图形时,所有坐标点的X,Y坐标都相当于旋转了angle弧度之后的坐标.

transform(double m11,double m12,double m22,double dx,double dy):对当前坐标系统执行矩阵变换.

并且还提供了如下两个方法来保存,恢复绘图状态:

save():保存当前的绘图状态.

restore():恢复之前保存的绘图状态.

折线图的代码及示意图如下:


<!DOCTYPE html>
<html>
<head>
	<title>折线图</title>
</head>
<body>
	<h2>折线图</h2>
	<canvas id="mc" width="500" height="400" style="border:1px solid black"></canvas>
	<script type="text/javascript">
		var canvas=document.getElementById('mc');
		var ctx=canvas.getContext('2d');
		ctx.beginPath();
		
		//坐标轴
		ctx.moveTo(30,20);
		ctx.lineWidth="1";
		ctx.lineTo(30,380);
		ctx.lineTo(400,380);
		//ctx.closePath();
		

		//横线
		ctx.strokeStyle="#999";
		for(var i=0;i<7;i++)
		{
			ctx.moveTo(30,30+50*i);
			ctx.lineTo(400,30+50*i);
		}
		
		//折线
		ctx.moveTo(100,300);
		ctx.lineTo(200,200);
		ctx.lineTo(280,280);
		ctx.lineTo(380,30);
		ctx.stroke();
	</script>


</body>
</html>

我们直接看代码里面body部分,首先我们创建一个canvas画布,定义了它的长,宽.然后在<script...>******<script.../>中插入js代码,先采用var来定义一个实例,用document.getElementById();方法来与之前定义的canvas画布进行绑定在一起.

首先编写"ctx.beginPath();"来开始一段绘制的开始;

ctx.moveTo(30,20); //使用moveto方法将坐标原点移动到(30,20);

ctx.lineWidth="1"; //使用linewidth方法将线的宽度设为1px;

ctx.lineTo(30,380); //使用lineto将(30,20)和(30,80)的线连接在一起

ctx.lineTo(400,380); //再将(30,20)和(400,380)的线连接在一起

剩余的其他方法如上面解释一样.

lbxxzt

关注

6
点赞
踩
48

收藏

觉得还不错? 一键收藏
5
评论
前端---HTML5如何制作一个折线图

在学习如何制作折线图,我们先学习一下canvas元素中CanvasRenderingContext2D对象提供的相关方法,通过使用坐标表换,开发者无须繁琐计算每个点的坐标,只需对坐标系整体表换即可. CanvasRenderingContext2D提供了如下的方法进行坐标变换:translate(double dx,double dy):平移坐标系统.该方法相当于...
复制链接

扫一扫