（转）第02节：在Canvas上画简单的图形

我们现在已经可以在HTML中使用Fabric.js库了，那这节我们就详细的学习一下如何在canvas上画出简单的图形。

在画东西之前我们需要了解画任何东西的基本三个步骤：

1. 声明画布（canvas），用new fabric.Canvas(‘ id ‘);这里需要注意的是Canvas的C必须大写。
2. 绘画图形，用fabric上的方法画出想要的图形。
3. 添加图形，把画好的图形用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);//把绘画好形状添加到画布上