（轉）第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來代替這種路徑的形式。