關于繪制線條，我們還能提供很多有創(chuàng)意的方法。不過，現(xiàn)在應該進一步學習稍復雜點的圖 形：路徑。HTML5 Canvas API中的路徑代表你希望呈現(xiàn)的任何形狀。本章對角線示例就是一條 路徑，你可能已經(jīng)注意到了，代碼中調(diào)用beginPath就說明是要開始繪制路徑了。實際上，路徑 可以要多復雜有多復雜：多條線、曲線段，甚至是"F路徑。如果想在canvas上繪制任意形狀， 那么你需要重點關注路徑API。

    按照慣例，不論開始繪制何種圖形，第一個需要調(diào)用的就是beginPath。這個簡單的函數(shù)不 帶任何參數(shù)，它用來通知canvas將要開始繪制一個新的圖形了。對于canvas來說，beginPath 函數(shù)最大的用處是canvas需要據(jù)此來計算圖形的內(nèi)部和外部范圍，以便完成后續(xù)的描邊和填充。

    路徑會跟蹤當前坐標，默認值是原點。canvas本身也跟蹤當前坐標，不過可以通過繪制代碼 來修改。

    調(diào)用了 beginPath之后，就可以使用context的各種方法來繪制想要的形狀了。到目前為止， 我們已經(jīng)用到了幾個簡單的context路徑函數(shù)。

mveTo(xf y)：不繪制，只是將當前位置移動到新的目標坐標(x,y)。

lineTo(x, y):不僅將當前位置移動到新的目標坐標(x,y)，而且在兩個坐標之間畫一條直線。

    簡而言之，上面兩個函數(shù)的區(qū)別在于：moveTo就像是提起畫筆，移動到新位置，而llneTo 告訴canvas用畫筆從紙上的舊坐標畫條直線到新坐標。不過，再次提醒一下，不管調(diào)用它們哪 一個，都不會真正畫出圖形，因為我們還沒有調(diào)用st「oke或者fHl函數(shù)?目前，我們只是在定 義路徑的位置，以便后面繪制時使用。

    下一個特殊的路徑函數(shù)叫做closePath。這個函數(shù)的行為同llneTo很像，唯一的差別在干 closePath會將路徑的起始坐標自動作為目標坐標。closePath還會通知canvas當前繪制的圖形 已經(jīng)閉合或者形成了完全封閉的區(qū)域，這對將來的填充和描邊都非常有用。

    此時，可以在已有的路徑中繼續(xù)創(chuàng)建其他的子路徑，或者隨時調(diào)用begi nPath重新繪制新路 徑并完全淸除之前的所有路徑。

    跟了解所有復雜系統(tǒng)一樣，最好的方式還是實踐?，F(xiàn)在，我們先不管那些線條的例子，使用 HTML5 Canvas API開始創(chuàng)建一個新場r景一帶有長跑跑道的樹林。權且把這個圖案當成是我們 長跑比賽的標志吧。同其他的畫圖方式一樣，我們將從基本元素開始。在這幅圖中松樹的樹冠最 簡單9代碼淸單2-8演示了如何在canvas上繪制一顆松樹的樹冠。