将多个路径连接在一起

• 开始路径
• 原点移到当前路径
• 从原点绘制一条线到指定点
• 再绘制一条线到另一个点
  ……
• 闭合路径

注意 moveTo会创建一条全新的子路径，而lineTo只是沿着一条已有的子路径继续画线。子路径会记录我们所添加的最后一个坐标值，因而可以多次调用lineTo方法。lineTo的每次调用都是从子路径的最后一个坐标值（由moveTo和lineTo调用留下）开始画线，绘制一条连接lineTo参数所定义的坐标值，然后再将子路径更新到新的坐标值。

最后一步是调用closePath方法，它会画一条连接子路径的最后一个点个第一个点——封闭路径。它也会将起点和终点添加到子路径上，这两个点现在具有相同坐标值。

贝塞尔曲线

绘制一条具有相同半径的曲线，可以使用arc方法和arcTo方法。要创建一条更复杂的曲线，需要使用贝塞尔曲线方法：quadraticCurveTo或bezierCurveTo。两种贝塞尔曲线都是通过控制点将一条直线变成曲线。

1. 二次贝塞尔曲线 quadraticCurveTo(cpx, cpy, x, y)

它只有一个控制点，意味着线条中只有一次弯曲。它有4个参数：控制点的(cpx,cpy)坐标，路径目标点的(x,y)坐标值。

2. 三次贝塞尔曲线 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

它有两个控制点，即线条中有两次弯曲。6个参数分别是：控制点1的(cp1x,cp1y)坐标，控制点2的(cp2x,cp2y)坐标，以及路径目标点的(x,y)坐标。

参考资料：《Foundation HTML5 Canvas For Games and Entertainment》Chapter 4 Authors: Hawkes, Rob