绘制规则图形

1、声明画布

var canvas = new fabric.Canvas('main');

2、绘制图形

var rect = new fabric.Rect({
  left:100,//距离画布左侧的距离，单位是像素
  top:100,//距离画布上边的距离
  fill:'red',//填充的颜色
  width:30,//方形的宽度
  height:30//方形的高度
});

3、添加图形至画布

canvas.add(rect);

4、其他规则图形：

• 绘制圆形 var circle = new fabric.Circle
• 绘制三角形 var triangle = new fabric.Triangle

绘制不规则图形

使用路径绘图：用点和线的移动的方式进行绘图。通过对 线、曲线、弧的应用绘制非常复杂的图形。

在fabric.Path( )方法中，

• “M”代表“移动”命令，这个“M 00” 代表把画笔移动到（0,0）点坐标。
• “L”代表“线”，“L 200 100 ”的意思是使用钢笔画一条线，从（0,0）坐标画到（200,100）坐标。
• “z” 代表让图形闭合路径。

画好三角形后，我们可以用set( )方法对三角形的位置、颜色、角度、透明度等属性进行设置。

具体代码如下：

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);