前言：
眼前姐妹们对“htmlcanvas开发工具”大约比较注重，姐妹们都需要分析一些“htmlcanvas开发工具”的相关资讯。那么小编同时在网摘上网罗了一些有关“htmlcanvas开发工具””的相关内容，希望姐妹们能喜欢，咱们一起来了解一下吧！介绍
Fabric.js是一个简单但功能强大的Javascript HTML5 canvas库，Fabric在canvas元素之上提供交互式对象模型，而且Fabric还内置SVG-to-canvas（和canvas-to-SVG）解析器，在Github上star数超过13k+，可见其受欢迎程度！
特性简介
1、使用Fabric.js，您可以在画布上创建和填充对象;对象就像简单的几何形状
2、或由数百或数千条简单路径组成的复杂形状
3、或者旧风格的图像
4、任何形状的渐变
5、您可以添加文本并动态操作其大小，对齐方式，字体系列和其他属性
6、将图像过滤器应用于图像
7、有内置的动画支持
8、拖动图像，可以将对象组合在一起，并同时对其进行操作
9、拖拽方法和方向旋转
10、Canvas可以序列化为JSON或SVG，并可以随时恢复
12、使用免费绘图来创建任何你喜欢的东西
其他特性Subclassing触摸设备支持Node.js支持（和npm包）如何获取？
既然是开源项目，那么当然可以到Github上获取相关代码，其一直保持更新维护并继续增强其功能，同时官网还提供了非常详细的文档，以及非常丰富的Demo，下面我们将进行截图预览！
Demo免费绘图文本填入
相信用过截图工具或者windows绘图工具的都知道什么效果
旋转天体图像过滤器HTML5 <video>元素矩阵变换
以上是选取一些案例进行演示，可能效果不佳，感兴趣的小伙伴可以去官网看看Demo
兼容性
其兼容性相当的不错
Firefox 2+Safari 3+Opera 9.64+Chrome (all versions)IE10, IE11, Edge安装
npm install fabric --save文档一览
这里就大致看下文档具备哪些内容，由于文档很详细，就不在细说，而且借助浏览器翻译，看懂是完全没问题的
最简单的示例
<!DOCTYPE html><html><head></head><body> <canvas id="canvas" width="300" height="300"></canvas> <script src="lib/fabric.js"></script> <script> var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ top : 100, left : 100, width : 60, height : 70, fill : 'red' }); canvas.add(rect); </script></body></html>自定义构建官方文档提供了非常人性化的一个地方就是你可以选择你需要的部分进行构建
总结
总体来说Fabric.js是一个非常值得使用的JavaScript库，不管是功能还是兼容性都是非常优秀的，而且你可以使用它来构建非常强大的BS端应用。如在线绘图等，如果你对它感兴趣，不放尝试一下，不会让你失望！
标签： #htmlcanvas开发工具
