關(guān)于繪制線條,我們還能提供很多有創(chuàng)意的方法。不過,現(xiàn)在應(yīng)該進(jìn)一步學(xué)習(xí)稍復(fù)雜點(diǎn)的圖 形:路徑。HTML5 Canvas API中的路徑代表你希望呈現(xiàn)的任何形狀。本章對角線示例就是一條 路徑,你可能已經(jīng)注意到了,代碼中調(diào)用beginPath就說明是要開始繪制路徑了。實(shí)際上,路徑 可以要多復(fù)雜有多復(fù)雜:多條線、曲線段,甚至是"F路徑。如果想在canvas上繪制任意形狀, 那么你需要重點(diǎn)關(guān)注路徑API。
按照慣例,不論開始繪制何種圖形,第一個(gè)需要調(diào)用的就是beginPath。這個(gè)簡單的函數(shù)不 帶任何參數(shù),它用來通知canvas將要開始繪制一個(gè)新的圖形了。對于canvas來說,beginPath 函數(shù)最大的用處是canvas需要據(jù)此來計(jì)算圖形的內(nèi)部和外部范圍,以便完成后續(xù)的描邊和填充。
路徑會跟蹤當(dāng)前坐標(biāo),默認(rèn)值是原點(diǎn)。canvas本身也跟蹤當(dāng)前坐標(biāo),不過可以通過繪制代碼 來修改。
調(diào)用了 beginPath之后,就可以使用context的各種方法來繪制想要的形狀了。到目前為止, 我們已經(jīng)用到了幾個(gè)簡單的context路徑函數(shù)。
mveTo(xf y):不繪制,只是將當(dāng)前位置移動到新的目標(biāo)坐標(biāo)(x,y)。
lineTo(x, y):不僅將當(dāng)前位置移動到新的目標(biāo)坐標(biāo)(x,y),而且在兩個(gè)坐標(biāo)之間畫一條直線。
簡而言之,上面兩個(gè)函數(shù)的區(qū)別在于:moveTo就像是提起畫筆,移動到新位置,而llneTo 告訴canvas用畫筆從紙上的舊坐標(biāo)畫條直線到新坐標(biāo)。不過,再次提醒一下,不管調(diào)用它們哪 一個(gè),都不會真正畫出圖形,因?yàn)槲覀冞€沒有調(diào)用st「oke或者fHl函數(shù)?目前,我們只是在定 義路徑的位置,以便后面繪制時(shí)使用。
下一個(gè)特殊的路徑函數(shù)叫做closePath。這個(gè)函數(shù)的行為同llneTo很像,唯一的差別在干 closePath會將路徑的起始坐標(biāo)自動作為目標(biāo)坐標(biāo)。closePath還會通知canvas當(dāng)前繪制的圖形 已經(jīng)閉合或者形成了完全封閉的區(qū)域,這對將來的填充和描邊都非常有用。
此時(shí),可以在已有的路徑中繼續(xù)創(chuàng)建其他的子路徑,或者隨時(shí)調(diào)用begi nPath重新繪制新路 徑并完全淸除之前的所有路徑。
跟了解所有復(fù)雜系統(tǒng)一樣,最好的方式還是實(shí)踐?,F(xiàn)在,我們先不管那些線條的例子,使用 HTML5 Canvas API開始創(chuàng)建一個(gè)新場r景一帶有長跑跑道的樹林。權(quán)且把這個(gè)圖案當(dāng)成是我們 長跑比賽的標(biāo)志吧。同其他的畫圖方式一樣,我們將從基本元素開始。在這幅圖中松樹的樹冠最 簡單9代碼淸單2-8演示了如何在canvas上繪制一顆松樹的樹冠。