我们现在已经可以在HTML中使用Fabric.js库了，那这节我们就详细的学习一下如何在canvas上画出简单的图形。
在画东西之前我们需要了解画任何东西的基本三个步骤：
- 声明画布（canvas），用new fabric.Canvas(‘ id ‘);这里需要注意的是Canvas的C必须大写。
- 绘画图形，用fabric上的方法画出想要的图形。
- 添加图形，把画好的图形用add( )方法，加到canvas上才可以显示出来。
画方形的代码：
var canvas =new fabric.Canvas('main');//声明画布
//开始绘画方形
var rect = new fabric.Rect({
left:100,//距离画布左侧的距离，单位是像素
top:100,//距离画布上边的距离
fill:'red',//填充的颜色
width:30,//方形的宽度
height:30//方形的高度
});
canvas.add(rect);//把绘画好的方形添加到画布上
画圆形的代码：
var canvas =new fabric.Canvas('main');//声明画布
//开始画圆形
var circle = new fabric.Circle({
radius:50,//圆的半径
fill:'green',//填充颜色
left:200,//距离画布左侧的距离，单位是像素
top:200//距离画布上边的距离
});
canvas.add(circle);//把绘画好的圆形添加到画布上
画三角形的代码：
var canvas =new fabric.Canvas('main');//声明画布
//开始画三角形
var triangle = new fabric.Triangle({
width: 80,
height: 100,
fill: 'blue',
left: 50,
top: 50
});
canvas.add(triangle);//把绘画好形状添加到画布上