绘制折线

1. 前言

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

2. 绘制折线

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

先看整体案例：

运行结果：

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

1. 获取 canvas 的渲染上下文。

   const canvas = document.getElementById('imooc');
   

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

2. 将笔触移动到 (100, 100) 这个坐标点。

   ctx.moveTo(100, 100)
   

3. 路径绘制到 (200, 200) 这个点，再绘制到 (300, 100) 这个点，这里路径走势是从 (100, 100) 的起点连到 (200, 200) 这个点，然后从 (200, 200) 这个点再连到 (300, 100) 这个点。

   ctx.lineTo(200, 200)
   

   ctx.lineTo(300, 100)

4. 开始描边。

   ctx.stroke()
   

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

3. 总结

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