大家好,我是前端实验室的小师妹！一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料等~
前言
身为一名优秀的前端工程师，大家肯定都使用过Canvas吧。
Canvas API提供一个通过JavaScript和HTML的canvas元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas提供了很好的canvas能力，但是Api不够友好。画简单的图形可以，但是画一些复杂的图形，写一些复杂的效果就不那么方便了。Fabric.js就是为此而开发的。
初识Fabric.js
Fabric.js是一个可以简化Canvas程序编写的库。Fabric.js 为 Canvas 提供所缺少的对象模型,svg parser, 交互和一整套其他不可或缺的工具。 如果你需要用 canvas 做特效，那我推荐你使用Fabric.js，因为Fabric.js语法更加简单易用，而且还提供了很多交互类的 api。
Fabric.js能做什么？
- 在Canvas上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。
- 给图形填充渐变颜色。
- 组合图形（包括组合图形、图形文字、图片等）。
- 设置图形动画集用户交互。
- 生成JSON, SVG数据等。
- 生成Canvas对象自带拖拉拽功能。
使用
1.安装Fabric.js
方式1：CDN
代码语言：javascript复制<script src="https://unpkg.com/fabric@4.6.0/dist/fabric.min.js"></script>
方式2：npm
代码语言：javascript复制npm install fabric --save
方式3：bower
代码语言：javascript复制bower install fabric
2.实践
这里我们以原生项目为例带大家认识Fabric.js
2.1 引入Fabric.js
代码语言：javascript复制<script src="https://unpkg.com/fabric@4.6.0/dist/fabric.min.js"></script>
2.2 创建 canvas 容器
代码语言：javascript复制<canvas width="200" height="200" id="c" style="border: 1px solid red;"></canvas>
Fabric 提供了 7 种基础形状：
- fabric.Circle (圆)
- fabric.Ellipse (椭圆)
- fabric.Line (线)
- fabric.Polyline (多条线绘制成图形)
- fabric.triangle (三角形)
- fabric.Rect (矩形)
- fabric.Polygon (多边形)
这里小师妹举例三种实现方式，更多实现还是需要大家自己去探索啦~
2.3 画圆
代码语言：javascript复制
var circle = new fabric.Circle({
top: 50, //距离顶部
left: 10, //距离左边
radius: 50, //圆角大小
fill: 'green' //填充的颜色
});
2.4 画三角形
代码语言：javascript复制var triangle = new fabric.Triangle({
top: 50,
left: 150,
width: 100,
height: 100,
fill: 'red'
});
2.5 画矩形
代码语言：javascript复制var rect = new fabric.Rect({
top: 50,
left: 300,
width: 100,
height: 100,
fill: 'yellow'
});
2.6 添加到画布中
代码语言：javascript复制# 可交互的画布
var canvas = new fabric.Canvas('canvas');
# 不可交互的画布
var canvas = new fabric.Canvas('canvas');
效果图
更多demo效果
最后
Fabric.js大大简化Canvas API里的概念，语法更加简单易用，还提供了很多交互类的API,代码看上去更加语义化，推荐大家学习使用~
下方公众号后台回复20211216获取Fabric下载地址及Demo源码！前端实验室还有更多好玩实用的开源项目，欢迎小伙伴们和大师兄小师妹讨论哦~
进了前端门，便是一家人 原创不易,点赞、留言、分享就是大师兄写下去的动力!
