fabric.js 对我有什么帮助？

前言

熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js，Fabric 算是一个元老级的 canvas 库了，从第一个版本发布到现在，已经有 8 年时间了。我近一年时间也在项目中使用，作为用户简单说说感受：

1. 方便，只有想不到，没有做不到
2. 源码写的真好，代码规范，注释清晰
3. 社区真匮乏，国内资源尤其少
4. 看文档不如看源码

优缺点都很鲜明，但总的来说，如果你要做一个在线编辑类的项目，比如在线 PPT，在线制图等应用，fabric 绝对是个很好的选择。

那么这一系列文章要写什么？这里不会主要介绍如何使用 fabric，主要写的内容是把在阅读源码过程中，把涉及到原理相关的知识总结出来，比如相关图形学知识、canvas 相关、fabric 中的设计思想等的相关知识。所以，如果你现在还对 fabric 不是很了解，建议先去官网找几个 demo 试一下。

下面我们进入这次的正题，这篇文章主要介绍 fabric.canvas 涉及到的部分内容。

从创建画布开始

fabric 创建画布很简单：

const canvas = new fabric.Canvas("domId", options);

在这样一行代码背后，fabric 主要做了下面这几件事情：

• 创建缓存 canvas
• 构建两层 canvas 元素：lower-canvas 和 upper-canvas
• 绑定事件
• 处理 retina 屏
• ...

下面我把相关内容一一阐述。

canvas 缓存

介绍 canvas 缓存，fabric 中的缓存也是类似的道理，简单来说，就是使用一个离屏 canvas 来做预渲染，在真实画布上用 drawImage 代替直接绘制图形。

我们先来看个 例子，大家可以把 FPS meter 打开，切换按钮可以看到，不使用缓存和使用缓存 FPS 值差距还是挺大的，我电脑在使用缓存的时候基本在 60fps，不使用会降到 15fps 左右。大家可以打开控制台或者在 这里 查看代码。
下面列出主要的代码片段：

class Ball {
  constructor(x, y, vx, vy, useCache = true) {
    // ...
    if (useCache) {
      this.useCache = useCache;
      thi