一、背景
原生 canvas 的操作主要基于上下文，需要使用者自己從0開始去實(shí)現(xiàn)一些基本功能，比較復(fù)雜。而 canvas 庫(kù)文件則封裝好了許多便利的對(duì)象，使得用戶可以在比較高級(jí)的層面上進(jìn)行繪制。
二、官網(wǎng)
Fabric.js 官網(wǎng)：Fabric.js Javascript Canvas Library
Konva.js 官網(wǎng)：Konva 中文文檔 中文API
三、區(qū)別
1、Fabric.js
優(yōu)點(diǎn)：文章來源：http://www.zghlxwxcb.cn/news/detail-527405.html
- 比較老牌，常用的轉(zhuǎn)換（放大、縮小、拖拽）都已經(jīng)封裝好了，特別適合用 Canvas 寫交互性的界面
- 內(nèi)置了豐富的筆刷，基本的對(duì)齊、標(biāo)線都有了
- 代碼集成度比較高，內(nèi)置了可交互富文本（純 Canvas 實(shí)現(xiàn)）
缺點(diǎn)：文章來源地址http://www.zghlxwxcb.cn/news/detail-527405.html
- 代碼使用 ES 5開發(fā)，不能很好的支持 TypeScript，開發(fā)效率可能會(huì)有影響
- 由于庫(kù)本身集成了很多功能點(diǎn)，代碼包的大小偏大（壓縮后308 kB）
- 細(xì)節(jié)功能還需要完善，比如標(biāo)線系統(tǒng)實(shí)現(xiàn)相對(duì)簡(jiǎn)單
2、Konva.js
優(yōu)點(diǎn)：
- 支持桌面/移動(dòng)端事件
- 控制點(diǎn)的自定義樣式和事件可以輕松實(shí)現(xiàn)
- 使用 TypeScript 編寫，TS 原生支持
- 渲染分層比較清晰，Stage -> Layer -> Group -> Shape
- 代碼簡(jiǎn)潔、干凈，易于閱讀
- 核心代碼精七，代碼包較?。▔嚎s后155 kB）
缺點(diǎn)：
- 部分功能實(shí)現(xiàn)基于 DOM（富文本）
- 后起之秀，周邊生態(tài)還比較薄弱
到了這里，關(guān)于HTML5 2d canvas 庫(kù) —— Fabric.js 和 Konva.js的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
