参考资料

http://fabricjs.com/
Rookie-Birds/Fabric-Tutorial_zh-CN

1. 初始化

var canvas = new fabric.Canvas("dom-id");

2. 画形状

// 矩形// 升级属性方法1var rect = new fabric.Rect({  width: 200,  height: 200,});// 升级属性方法2rect.set("top", 100).set("left", 100);// 升级属性3rect.set({  fill: "red"});// 圆形var circle = new fabric.Circle();circle.set({ radius: 50, width: 100, height: 100, fill: 'green' });circle.set("top", 100).set({ left: 100 });// 最后增加到主canvascanvas.add(rect);canvas.add(circle);

3. 画路径

数据属性差不多同SVG，M 移动到点，L用线移动，z结束，关闭path

var path = new fabric.Path("M0,0L200,0L200,200z");path.set("fill","yellow");canvas.add(path);

4. 画图片

有 3 种获取图片的方法：

1. fabric.Image.fromElement 从dom节点获取图片
2. fabric.Image.fromObject 从图片的data-url数据获取
3. fabric.Image.fromURL 从远程图片获取

我们这里测试远程获取图片并绘制：

fabric.Image.fromURL("http://b.hiphotos.baidu.com/image/h%3D300/sign=92afee66fd36afc3110c39658318eb85/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg", img => {canvas.add(img);})

5. 其余

// 清空画布canvas.clear();// 重绘刷新canvas.renderAll();