JavaScript Canvas库 fabricjs介绍和安装

介绍

fabric.js 是一个用于创建可交互式的 HTML5 canvas 应用程序的开源 JavaScript 库,它提供了一套简单、易用的 API,可以快速地实现各种图形操作和动画效果。使用 fabric.js,你可以轻松地创建文本、图像、形状、路径等多种元素,并对它们进行缩放、旋转、位移、剪切、合并等操作。

案例

图片编辑器

MG动画在线制作

官网

http://fabricjs.com/
https://fabricjs.github.io/

教程

https://geek-docs.com/fabricjs/fabricjs-tutorials/t_how-to-add-blur-in-and-blur-out-animation-to-a-polyline-using-fabricjs.html

https://blog.csdn.net/qq_40340943/article/details/125144861

https://segmentfault.com/a/1190000042022539

特点:

  • 简单易用:fabric.js 的 API 非常简单、易于理解和使用,即使是初学者也能够快速上手。

  • 功能强大:fabric.js 提供了各种基本图形元素的创建和操作方法,同时还支持高级功能,如复合对象、滤镜、选区、事件处理、动画等。

  • 跨浏览器兼容:fabric.js 支持多种主流浏览器,包括 Chrome、Firefox、Safari、Edge 和 IE 等。

  • 开源免费:fabric.js 是完全开源的,你可以自由地使用、修改和分发它。

安装

版本选择

5.x 版本是用 JavaScript 开发的
6.x 版本以后是用 typescript 开发的(集成vue时,导入模块的方式就不痛)

目前互联网资料主要是 5.x 之前的写法,所以本系列文章使用 5.x 版本

CDN

<script src="https://unpkg.com/fabric@5.4.0/dist/fabric.min.js"></script>

vue安装

npm i fabric@5.4.0 --save

参考:
https://blog.csdn.net/weixin_41712594/article/details/135058444


原文出处:/show_1IX8RGtUYi9M.html