HTML5程式設計 Canvas API

檢測浏覽器支援情況

加入canvas

對角線

變換

可以通過變換(縮放、平移、旋轉)等達到和上面相同的效果。

用變換的方式繪制對角線

 路徑

html5 canvas api中的路徑代表你希望呈現的任何形狀。

beginpath():不論開始繪制何種圖形，第一個需要調用的就是beginpath。這個簡單的函數不帶任何參數，它用來通知canvas将要開始繪制一個新的圖形了。

moveto(x,y):不繪制，将目前位置移動到新的目标坐标(x,y)。

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

closepath():這個函數行為和lineto很像，唯一的差别在于closepath會将路徑的起始坐标自動作為目标坐标。它還會通知canvas目前繪制的圖形已經閉合或者形成了完全封閉區域，這對将來的填充和描邊都非常有用。

繪制一個松樹地樹冠

描邊樣式

通過描邊模式，可以讓樹冠看起來更加真實。

填充樣式

繪制矩形

我們給樹增加樹幹

繪制曲線