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

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

    路徑會(huì)跟蹤當(dāng)前坐標(biāo)，默認(rèn)值是原點(diǎn)。canvas本身也跟蹤當(dāng)前坐標(biāo)，不過(guò)可以通過(guò)繪制代碼 來(lái)修改。

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

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

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

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

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

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

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