将多个路径连接在一起

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

注意 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