Fabric.js: 动态和可交互的HTML5 Canvas库

Fabric.js是一个用于HTML5 canvas元素的javascript库，它可以让你创建、控制和操作canvas对象。Fabric.js提供了一些基本对象，如矩形、圆形、文本等，还可以添加自定义的对象。

以下是一些Fabric.js的常用示例：

1. 创建一个矩形：

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});
canvas.add(rect);

2. 创建一个圆形：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
canvas.add(circle);

3. 添加文本：

var canvas = new fabric.Canvas('c');
var text = new fabric.Text('Hello World', {
  left: 100,
  top: 100,
  fontSize: 20
});
canvas.add(text);

4. 添加图片：

var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('my_image.png', function(img) {
  img.set({ left: 100, top: 100, width: 200, height: 200 });
  canvas.add(img);
});

5. 设置对象的交互性：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
circle.hasControls = true;
circle.hasBorders = true;
canvas.add(circle);

6. 设置对象的选择边框：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
circle.hasControls = true;
circle.hasBorders = true;
canvas.add(circle);
canvas.setActiveObject(circle);

7. 移动对象：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
canvas.add(circle);
circle.set({ left: 200, top: 200 });
canvas.renderAll();

8. 缩放对象：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
canvas.add(circle);
circle.set({ scaleX: 2, scaleY: 2 });
canvas.renderAll();

9. 旋转对象：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 100
});
canvas.add(circle);
circle.set({ angle: 45 });
canvas.renderAll();

10. 删除对象：

var canvas = new fabric.Canvas('c');
var circle = new fabric.Circle({
  radius: 20,
  fill: 'green',
  left: 100,
  top: 1