（轉）第04節：Fabric.js用路徑畫不規則圖形

在Canvas上畫方形、圓形、三角形都是很容易的，只要調用fabric對應的方法就可以了，但這些都是規則的圖形，如果你想畫一個不規則的圖形,這時候你可以用fabric.js提供的路徑繪圖方法。所謂路徑繪圖就是用點和線的移動的方式進行繪圖。通過對 線、曲線、弧的應用你可以非常復雜的圖形。

我們先來看一段的代碼：

var canvas = new fabric.Canvas('canvas');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120,fill:'red' });
canvas.add(path);

上邊的代碼需要注意的是第二行， fabric.Path( )方法里邊跟了一串字符串參數，看着有點復雜，其實這並不難理解。“M”代表“移動”命令，這個“M 00” 代表把畫筆移動到（0,0）點坐標。“L”代表“線”，“L 200 100 ”的意思是使用鋼筆畫一條線，從（0,0）坐標畫到（200,100）坐標。 “z” 代表讓圖形閉合路徑。就這樣我們輕松的畫出了一個三角形。畫好三角形后，我們可以用set( )方法對三角形的位置、顏色、角度、透明度等屬性進行設置。

雖然用路徑畫圖形很簡單，但圖形比較復雜時，你會發現這很難控制，代碼會變的臃腫而不可閱讀，在實際工作中沒有這樣使用的。我們可以用svg來代替這種路徑的形式。