特性简介

1、利用Fabric.js,您可以在画布上创建和添补工具;工具就像大略的几何形状

2、或由数百或数千条大略路径组成的繁芜形状

3、或者旧风格的图像

html5矩阵简略但功效壮大的Javascript HTML5 canvas库Fabricjs Angular

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端运用。
如在线绘图等,如果你对它感兴趣,不放考试测验一下,不会让你失落望!