一、背景
原生 canvas 的操作主要基于上下文，需要使用者自己从0开始去实现一些基本功能，比较复杂。而 canvas 库文件则封装好了许多便利的对象，使得用户可以在比较高级的层面上进行绘制。
二、官网
Fabric.js 官网：Fabric.js Javascript Canvas Library
Konva.js 官网：Konva 中文文档 中文API
三、区别
1、Fabric.js
优点：文章来源：https://www.toymoban.com/news/detail-527405.html
- 比较老牌，常用的转换（放大、缩小、拖拽）都已经封装好了，特别适合用 Canvas 写交互性的界面
- 内置了丰富的笔刷，基本的对齐、标线都有了
- 代码集成度比较高，内置了可交互富文本（纯 Canvas 实现）
缺点：文章来源地址https://www.toymoban.com/news/detail-527405.html
- 代码使用 ES 5开发，不能很好的支持 TypeScript，开发效率可能会有影响
- 由于库本身集成了很多功能点，代码包的大小偏大（压缩后308 kB）
- 细节功能还需要完善，比如标线系统实现相对简单
2、Konva.js
优点：
- 支持桌面/移动端事件
- 控制点的自定义样式和事件可以轻松实现
- 使用 TypeScript 编写，TS 原生支持
- 渲染分层比较清晰，Stage -> Layer -> Group -> Shape
- 代码简洁、干净，易于阅读
- 核心代码精七，代码包较小（压缩后155 kB）
缺点：
- 部分功能实现基于 DOM（富文本）
- 后起之秀，周边生态还比较薄弱
到了这里，关于HTML5 2d canvas 库 —— Fabric.js 和 Konva.js的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
