超好用的canvas交互库——Fabric.js（1）

一个强大的JS画布库

官网地址：http://fabricjs.com/

开始创建Fabric实例

1.<script type="text/javascript" src="../../../js/module/fabric.js"></script>
2.var canvas = new fabric.Canvas('c');//获取节点创建实例（ID =“ c”）
3.var rect = new fabric.Rect({
   
  	left:100,
  	top:100,
  	fill:“红色”,
  	width:20,
  	height:20
	});
	//在画布上“添加”矩形
4.canvas.add(rect);

就可以创建这样一个矩形啦

常用绘制的图形还有

1.fabric.Circle
2.fabric.Ellipse
3.fabric.Line
4.fabric.Polygon
5.fabric.Polyline
6.fabric.Rect
7.fabric.Triangle

比如
var circle = new fabric.Circle({
   
  radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
   
  width: 20, height: 30, fill: 'blue', left: 50, top: 50
});

常用的方法

1. set

var canvas = new fabric.Canvas（'c'）;