Fabric.js 从入门到

---

theme: smartblue 简介

首先要说的是：本文篇幅很长，建议点赞收藏(点赞就等于学会了)。

Fabric.js 简介

Fabric.js 是一个功能强大且 *** 作简单的 Javascript HTML5 canvas 工具库。

如果你需要用 canvas 做特效，那我推荐你使用 Fabric.js ，因为 Fabric.js 语法更加简单易用，而且还提供了很多交互类的 api。

Fabric.js 简化了很多 Canvas 里的概念，代码看上去也更加语义化。

Fabric.js 能做什么？

可以打开 『Fabric.js 官网首页』 直接看例子，也可以看看 『Fabric.js Demos』 查看更炫酷的例子。

本文简介

如果是 0基础 的读者，希望可以从头读到尾，读完起码大概知道 Fabric.js 有哪些功能。

本文是根据我的学习过程来编写的，只要跟着本文一步一步 *** 作，一定可以入门 Fabric.js ~~，同时还能改善您的睡眠质量、解决毛发过多等诸多问题~~。

由于我使用 Fabric.js 的时间不长，这份笔记在各个知识点的内容肯定不够全面的，也不一定完全正确。读者们如果发现本文存在不正确的地方请大胆指出，我会改的~

本文适合人群：

有原生三件套基础的开发者最好有 canvas 基础(这是加分项，完全没有也没关系的)

本文主要讲解 Fabric.js 基础，包括：

画布的基本 *** 作基础图形绘制方法(矩形、圆形、三角形、椭圆、多边形、线段等)图片和滤镜的使用文本和文本框动画分组和打散分组基础事件自由绘画裁剪序列化和反序列化……

除此之外，还会讲一些进阶一点的 *** 作，比如：

自定义 *** 作角样式和状态自定义控件复制粘贴图形使用事件方式 *** 作图形和分组……

除了上述内容外，我还会根据日后的工作中整理出更多常用和好玩的 *** 作，本文即学习仓库会不定期更新！！！

相关链接

『Fabric.js npm地址』

『Fabric.js github地址』

🎁本文案例在线预览

🎁本文所有案例仓库地址 【欢迎Star，不定期更新！！！】

---

开发环境搭建 环境和版本说明

本文使用 Fabric.js 的版本是 4.6。

本文的开发环境是使用 Vite 构建的 Vue 3.2 项目。

没有 Vite 和 Vue3.2 基础的同学也不用怕，因为 Vite 真的足够简单。

本文的目的是讲解 Fabric.js ，所以用到 Vue 3.2 的地方其实很少，用到时我也会有详细说明。

如果你不打算使用 Vite 和 Vue 3.2 也没关系，用你喜欢的方式去搭建项目即可。

现在只需跟着以下步骤搭建项目即可。

搭建环境(Vite + Vue3)

Vite 官网

Vue3 官网

如果你不想使用 Vite + Vue3 的话，可以跳过本节。

我也建议你直接使用原生 (HTML+CSS+JS) 的方式直接学习 Fabric.js，因为这样上手速度最快。

1. 搭建Vite项目

npm init @vitejs/app

2. 给项目起个名，并选择 Vue

之后会让你选 vue 或者 vue + ts，我选择了 vue ，你随意。

为什么不选 ts ？因为一人开发的练手项目使用 ts 有点得不偿失。

3. 初始化项目

其实做完上一步就会给出提示(3条命令)，跟着敲完就能运行项目了

```

进入项目目录

cd fabric-demo

初始化项目

npm install

运行项目

npm run dev ```

如果 npm 太慢的话，可以使用 cnpm 。

如果不知道 cnpm 怎么搞，请自行百度。

安装Fabric.js 方式1：CDN

```html

---
## 起步 只需 **3个 *** 作** 就能展示点东西了。 ### 1. 新建页面并引入 Fabric.js 如果是原生项目，使用 `
### 2. 创建 canvas 容器 在 `HTML` 中创建 ` `，并设置容器的 `id` 和 `宽高，width/height` ```html ``` 这里创建了一个 `canvas` 容器，**id="c"**。 指定长宽都为 `400px` ，值得注意的是，这里不需要加 `px` 这个单位。 `` 这句其实可以不加，这里只是为了在浏览器看到 `canvas` 元素到底在哪。 
### 3. 使用 fabric 接管容器，并画一个矩形 在 `JS` 中实例化 `fabric` ，之后就可以使用 `fabric` 的 `api` 管理 `canvas` 了。 ```html

```

详情请看代码中每一行注释。