从 fabric 源码来看如何做好一个 canvas 库

前言，本篇文章可以让你从 0 到 1 快速了解 canvas，了解 fabricjs 源码库的整体组织和关键核心代码。

• canvas 是什么，它的渲染原理

• retina 屏模糊的原理以及解决方法

• fabricjs 核心关键优化：事件驱动、retina 屏处理、渲染优化（分层，requestAnimationFrame）、绘制对象的各种继承关系。

Canvas 是什么?

Canvas 是什么东西？它跟传统的 DOM 有什么区别？我们先看看官方的定义：

❝

「Canvas API」 提供了一个通过 JavaScript 和 HTML 的 canvas 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

❞

简单的，我们可以理解为：Canvas 是一个画布，然后我们可以使用 JS 做为画笔在上面绘制东西。

Canvas 渲染原理

众所周知，传统的 DOM 动画在主线程渲染的流程如下：

• DOM 动画：

• Canvas 渲染流程：

我们知道在浏览器上渲染动画，每一秒最高达到 60 帧左右，换句话说，如果我们能在 16.7 毫秒内完成图像的计算与渲染过程，那视觉呈现就可以达到完美的 60fps。这样界面就不会卡顿。

从上面的图对比看出，Canvas 能够直接操作绘图上下文，不需要经过 HTML、CSS 解析、构建渲染树、布局等一系列操作。因此单纯绘图的话，Canvas 比 HTML/CSS 和 SVG 要快得多，同样移动大量的元素，Canvas 的性能也会比传统 DOM 好一些。

Canvas 是一个即时绘制的模式，这意味着绘图表面不会保留所绘制对象的信息。传统的 DOM 模式需要维护对应的 DOM 层次结构。需要额外的内存来保存场景，并且更新上也会更慢一点。所以，Canvas 占用的内存也会少一点。

Canvas 绘制的是“位图”，在对位图进行缩放、旋转等操作时，无法生产新的像素，因此会放大原有的像素填补空白，这样会让图片显得不清晰。矢量图在移动，变换等操作中的开销远大于位图的，尤其是移动+缩放，因为浏览器要保证每一个边都平滑无毛边和过度。

总结 Canvas 的特点：

1. Canvas 绘制的是“位图” 。

2. 在元素特别多的情况下，Canvas 的性能会更高一点。

3. Canvas 占用的内存会更小一点。

前面都是为了让我们更清楚地了解 Canvas 是什么，接下来步入正题，了解下从 fabric 源码学到的东西。

Fabric 源码

官方定义：

Fabric.js是一个功能强大且简单的HTML5画布库，它给canvas上的元素提供了交互式对象模型。借助Fabric.js，你可以轻松地绘制各种图形线条图片，对它们进行拖拽、旋转、形变等操作，并且支持丰富的事件方法。

• 仓库地址：https://github.com/fabricjs/fabric.js

• 文档地址：http://fabricjs.com/

适用场景：

大量动画，画板，图片处理等都可以使用这个库。官方提供了大量的 demo：http://fabricjs.com/demos/ ，可以快速体验下。

思维导图：

项目比较老旧，打包方式还是直接读文件压缩打包的。没有 ES6，没有 TS ，很多 IIFE 。

整体代码组织形式和关系：

接下来，看一下它的核心技术，源码先从调用的方法来入手：

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

源码如下：

主要封装了以下的方法：

1. 外层包裹一个元素

2. 创建 2个 Canvas ，一个 upperCanvas ，一个 LowerCanvas

3. 初始化事件

4. 处理 retina 屏

创建 2 个 Canvas，一个 upperCanvas ，一个 lowerCanvas

• lowerCanvas 只负责渲染元素；

• 所有的交互，比如框选，事件处理都在 upperCanvas 上。

我们可以看到 upperCanvas 等大小属性都是一致的，坐标也是可以一一对应的。比如在 upperCanvas 上某个位置点击了一下，就可以到 lowerCanvas 中相应的坐标去查找是否点击了这个元素。

如果你的画布不需要任何交互，可以只渲染  LowerCanvas 元素。使用下面的代码即可。

new fabric.StaticCanvas('domId', options)

处理 retina 屏

retina 屏：一种具备高像素密度的液晶屏，同样大小的屏幕上显示的像素点由一个变成多个。如下图