绘制折线

1. 前言

本小节我们学习如何绘制折线。

2. 绘制折线

绘制线段上一小节我们已经学过了，利用 moveTo、lineTo、stroke 这三个方法就可以做到。那我们如果要画一条折线怎么画呢？答案就是用多次 lineTo 就可以了。

先看整体案例：

实例演示

预览复制

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		
		ctx.moveTo(10,10);
		ctx.lineTo(100,50);
		ctx.lineTo(200,10);
		
		ctx.stroke();
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>慕课网Wiki</title>
    <style>
        #imooc{
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
	
	<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
	
	<script>
		const canvas = document.getElementById('imooc');
		const ctx = canvas.getContext('2d');
		
		
		ctx.moveTo(10,10);
		ctx.lineTo(100,50);
		ctx.lineTo(200,10);
		
		ctx.stroke();
	</script>
</body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

运行结果：

我们将上面的例子拆分讲解：

获取 canvas 的渲染上下文。

const canvas = document.getElementById('imooc');
const ctx = canvas.getContext('2d');

将笔触移动到 (100, 100) 这个坐标点。
```
ctx.moveTo(100, 100)
```
路径绘制到 (200, 200) 这个点，再绘制到 (300, 100) 这个点，这里路径走势是从 (100, 100) 的起点连到 (200, 200) 这个点，然后从 (200, 200) 这个点再连到 (300, 100) 这个点。
```
ctx.lineTo(200, 200)
ctx.lineTo(300, 100)
```
开始描边。
```
ctx.stroke()
```

到这里，我们就完成了一条折线的绘制。

3. 总结

本小节我们学习了如何绘制折线线段，下一节我们将学习如何绘制多条折线线段。