fabric.js Canvas实用库 api记录

一、什么是fabric.js

今天，我想向您介绍Fabric.js —一个功能强大的Javascript库，使使用HTML5 canvas的工作变得轻而易举。Fabric提供了画布缺少的对象模型，以及SVG解析器，交互性层和一整套其他必不可少的工具。这是一个完全开放源代码的项目。

演示http://fabricjs.com/

简单的例子来看下他的区别

//用canvas
var canvasEl = document.getElementById('c');
//获取要绘制的2d上下文（前面提到的“位图”）
var ctx = canvasEl.getContext('2d');
//设置上下文的填充颜色
ctx.fillStyle = 'red';
//在100,100点处创建矩形，尺寸为20x20 
ctx.fillRect(100, 100, 20, 20);
ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillRect(-10, -10, 20, 20);


//用fabricjs
var canvas = new fabric.Canvas('c');
// 创建一个矩形对象
var rect = new fabric.Rect({
  left: 100, //距离左侧
  top: 100, //距离上面
  fill: 'red', //填充颜色
  width: 20, //长
  height: 20, //高
  angle: 45 //旋转角度
});
// 将“矩形”添加到画布
canvas.add(rect);

在Fabric中，我们对对象进行操作 -实例化它们，更改其属性并将其添加到画布。简单的例子可以说明他的不同

二、常用的方法