（转）第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来代替这种路径的形式。