4.canvas绘制基本图形——折线

在日常生活中，除了矩形与圆弧外，接触最多的就是折线了。甚至矩形也可以看出是一段折线，所以我们自然也可以使用绘制折线的方式绘制出矩形

moveTo

认识折线之前，我们先认识下moveTo这个方法。形象一点说这个方法就是将我们的画笔短暂抬起来换个点落笔，注意在移动的过程中画笔是抬起的，没有在画布上，所以也不会绘制出任何图形。

lineTo

lineTo的作用就是设置一个终点坐标，并与起始坐标连接。当然它也可以代表一个中点坐标甚至是起点坐标。也就是说在绘制折线的时候我们甚至可以全部使用lineTo来完成

但是我还是推荐起点使用moveTo，更加有语义化更加贴合我们“画画”的风格

当然，我们很多时候设置折线并不是只看线段，起点与终点或者折线交点的形状有时候也需要我们设置。
这里我们先使用lineWidth将线段宽度设置为20，可以让我们更加清晰的看到各个节点的形态。

let c1 = document.getElementById('c1')
let ctx = c1.getContext('2d')
ctx.moveTo(50, 100)
ctx.lineTo(150, 50)
ctx.lineTo(250, 100)
ctx.lineWidth = 20
ctx.stroke()

lineJoin

设置线段交点样式，有三个值
round
通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。
看下圆角效果：

bevel
在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。

miter
通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。

lineCap

设置线段末端形态，注意多个线段连接处不属于末端
butt
线段末端以方形结束。

round
线段末端以圆形结束。

square
线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

虚线设置

我们还可以使用setLineDash来进行虚线设置
他只有一个参数，一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

let c1 = document.getElementById('c1')
let ctx = c1.getContext('2d')
ctx.moveTo(0, 100)
ctx.lineTo(200, 100)
// 设置虚线，实线与虚线比例10：5
// ctx.setLineDash([10, 5])
// 如果数组是奇数长度，会自动复制为奇数的两倍，如下便是[10, 5, 2, 10, 5, 2]
// 那么就是实线长度比10， 虚线5，实线2， 虚线10...
ctx.setLineDash([10, 5, 2])
ctx.stroke()