关于绘制线条，我们还能提供很多有创意的方法。不过，现在应该进一步学习稍复杂点的图 形：路径。HTML5 Canvas API中的路径代表你希望呈现的任何形状。本章对角线示例就是一条 路径，你可能已经注意到了，代码中调用beginPath就说明是要开始绘制路径了。实际上，路径 可以要多复杂有多复杂：多条线、曲线段，甚至是"F路径。如果想在canvas上绘制任意形状， 那么你需要重点关注路径API。

    按照惯例，不论开始绘制何种图形，第一个需要调用的就是beginPath。这个简单的函数不 带任何参数，它用来通知canvas将要开始绘制一个新的图形了。对于canvas来说，beginPath 函数最大的用处是canvas需要据此来计算图形的内部和外部范围，以便完成后续的描边和填充。

    路径会跟踪当前坐标，默认值是原点。canvas本身也跟踪当前坐标，不过可以通过绘制代码 来修改。

    调用了 beginPath之后，就可以使用context的各种方法来绘制想要的形状了。到目前为止， 我们已经用到了几个简单的context路径函数。

mveTo(xf y)：不绘制，只是将当前位置移动到新的目标坐标(x,y)。

lineTo(x, y):不仅将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线。

    简而言之，上面两个函数的区别在于：moveTo就像是提起画笔，移动到新位置，而llneTo 告诉canvas用画笔从纸上的旧坐标画条直线到新坐标。不过，再次提醒一下，不管调用它们哪 一个，都不会真正画出图形，因为我们还没有调用st「oke或者fHl函数?目前，我们只是在定 义路径的位置，以便后面绘制时使用。

    下一个特殊的路径函数叫做closePath。这个函数的行为同llneTo很像，唯一的差别在干 closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形 已经闭合或者形成了完全封闭的区域，这对将来的填充和描边都非常有用。

    此时，可以在已有的路径中继续创建其他的子路径，或者随时调用begi nPath重新绘制新路 径并完全淸除之前的所有路径。

    跟了解所有复杂系统一样，最好的方式还是实践。现在，我们先不管那些线条的例子，使用 HTML5 Canvas API开始创建一个新场r景一带有长跑跑道的树林。权且把这个图案当成是我们 长跑比赛的标志吧。同其他的画图方式一样，我们将从基本元素开始。在这幅图中松树的树冠最 简单9代码淸单2-8演示了如何在canvas上绘制一顆松树的树冠。