Fabricjs是一个开源的基于canvas的web交互的js库,Fabric 提供了canvas 渲染的对象模型，也能对SVG进行了很好的解析和交互，并且可以当作对于其他类似需求的必不可少的工具。它基于原生方法提供了简单并且强大的对象模型.也考虑到了canvas的状态和渲染，直接让我们对对象进行操作即可。

Fabric.js能做什么

• 在Canvas画布上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。
• 给图形填充渐变颜色。
• 组合图形（包括组合图形、图形文字、图片等）。
• 设置图形动画及用户交互，生成的对象自带拖拉拽功能。
• JSON, SVG数据的序列化和反序列化。

为什么使用Fabric.js

html5 Canvas提供了完整的画布，可以轻松的在画布上绘制简单的图形、制作简单的动画，但是HTML5 Canvas提供的api过于低级，且操作基于上下文，因此在绘制复杂图形或者需要实现用户交互时，就显得不是那么方便了。Fabric.js在HTML5 Canvas原生API之上，提供完整的对象模型，由Fabric.js来管理HTML5 Canvas画布的状态和渲染，用户基于具体的对象，来编写代码，完成所需功能的开发（类似于面向过程和面向对象）。

安装 Fabric.js

假设您的项目中正在使用 ES6 和 webpack，您可以开始使用 Fabric.js，如下所示：

1、在命令行中：

npm install fabric（或yarn add fabric）

2、将其引入

import { fabric } from 'fabric'

注：默认的 fabric npm 模块产生了相当大的包，如果 Fabric.js 中您有很多可能不需要的包，在这种情况下，可以在命令行中构建你自己的版本。

绘制图形

1、声明画布

var canvas = new fabric.Canvas('main');

2、绘制图形

var rect = new fabric.Rect({  
	left:100,//距离画布左侧的距离，单位是像素  
	top:100,//距离画布上边的距离  
	fill:'red',//填充的颜色  
	width:30,//方形的宽度  
	height:30//方形的高度
});

3、添加图形至画布

canvas.add(rect);

链接: https://fly63.com/nav/795