Canvas——复杂路径
将多个路径连接在一起
- 开始路径
- 原点移到当前路径
- 从原点绘制一条线到指定点
- 再绘制一条线到另一个点
…… - 闭合路径
注意 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