用Canvas绘制折线图

通过CanvasRenderingContext2D对象能够获得绘制矩形的方法，但是想要绘制圆形椭圆等图形，必须在canvas上启用路径，借用路径来绘制图形。

而绘制折线图最主要用到的就是 moveTo（）和lineTo（）。

这两种方法很好区分：

moveTo（double x,double y）	把Canvas的当前路径的结束点移动到x、y对应的点。
lineTo（double x，double y）	把Canvas的当前路径从当前结束点连接到x、y对应的点。

绘制折线图之前先绘制一个坐标系：
在这里插入图片描述
结果如下图：

下一步则是绘制折线，这里我们可以用一个for循环来实现。我们可以在function中继续插入如下代码：

代码中的 **## ctx.moveTo(x,y)**是为了将Canvas当前结束点移动到（x，y），如果没有这项操作，折线将从上一个结束点直接连接到下一个点。
因此最终结果是：
在这里插入图片描述
此时我们已成功地绘制出了一个简易的折线图，其中包含了坐标和折线。我们若是想要绘制三角形，或者其他形状的图形也可以仿照这个方法绘制。
绘制折线图源代码如下：

<!DOCTYPE html>

<html>
	<head>
	
	</head>
	<body>
		<h2>月薪走势图</h2>
		
		<canvas id="mc" width="1000" height="580" style="border:1px solid black"></canvas>
		<script type="text/javascript">
			function createLine(ctx,x1,y1,length)
			{
				ctx.beginPath();
				ctx.moveTo(x1,y1);
				ctx.lineTo(x1,y1+length);
				ctx.moveTo(x1,y1+length);
				ctx.lineTo(x1+300+length,y1+length);
				
				var va=150;
				var con=100;
				var x=x1+150;
				var y=y1+length-300;//避免length过大而使折线超出范围。
				ctx.moveTo(x,y);//将Canvas当前结束点移动到（x，y）。
				for(var i=1;i<7;i++)
				{
					va=va*(-1);
					x=x+con;
					y=y+va;
					ctx.lineTo(x,y);
				}
				

			}
			var canvas=document.getElementById('mc');
			var ctx=canvas.getContext('2d');
			ctx.lineWidth=3;
			createLine(ctx,50,50,500);
			ctx.stroke();
		</script>
	</body>
</html>

用Canvas绘制折线图

猜你喜欢