Canvas技術的誕生可謂是讓繪圖技術如虎添翼，本文將推薦一系列Canvas圖形繪製、流程圖、組織圖、甘特圖、全景圖、3D庫、VR/AR、圖像編輯等方面的庫，希望助你在Canvas繪圖時尋得一把趁手的利器。
同時，愣錘將Canvas的相關資源進行的收錄整理分類，更多的資源請關注Github項目地址awesome-canvas。目前該庫持續維護中，已收錄大約200+的Canvas庫，以及資源網址、插件、書籍、博客等資源。
圖形處理庫
圖形繪製是Canvas中最基本的內容，但是Canvas本身提供的api比較基礎，開發起來低效。而且也缺少完整的事件系統、區域監測、緩存等等。下面讓我們來看幾款高效的圖形處理庫吧。
Konva
簡介：Konva是一個 HTML5 Canvas JavaScript 框架, 通過擴展 Canvas 的 2D Context 讓桌面端和移動端Canvas支持交互性，使其支持高性能動畫、過渡、節點嵌套、分層、過濾、緩存、事件處理等等。Konva官方地址（https://konvajs.org/docs/sandbox/index.html）
除上述之外，文檔相對友好，但也僅僅是相對於同類庫的文檔友好那麼一滴滴，社區有維護一個中文文檔。
fabric.js
簡介： Fabric.js是一個可以輕鬆處理 HTML5 Canvas元素的框架，使得Canvas元素支持交互式對象模型，同時也是一個SVG-to-Canvas和Canvas-to-SVG的解析器， fabric.js官方地址（http://fabricjs.com/demos/）
fabricjs是和konva同類型但是比konva更老牌的一個的Canvas庫，目前github上Star數2萬+
更多示例如下圖所示：
圖像編輯
市面上圖像編輯的軟體有很多，像大家所熟知的PS、sketch、axure、激萌、剪映等等。那麼如果我們想開發類似的軟體，有沒有可以使用的庫或者參考的開源軟體呢？
miniPaint
簡介：miniPaint [官方網站在線演示]（https://viliusle.github.io/miniPaint/） - 在線版的PS。PS這款軟體大家都不陌生，web版本的如何呢？請看下圖：
DarkroomJS
簡介：DarkroomJS [官方網站在線演示]（https://pqina.nl/pintura/?affiliate_id=854594675） - 基於Fabricjs的瀏覽器端可擴展的圖像編輯工具
fabric-brush
簡介：fabric-brush [官方網站在線演示] （https://tennisonchan.github.io/fabric-brush/）- 基於Fabric.js的Canvas筆刷工具
fabricjs-image-editor-origin
簡介：fabricjs-image-editor-origin [官方網站在線演示] （https://fabricjs-image-editor-f62330.netlify.app/）- Fabricjs圖像編輯器
REACT-sketch
簡介：react-sketch [官方網站在線演示] （http://tbolis.github.io/showcase/react-sketch/）- 基於React、Fabricjs的素描應用
glitch-canvas
簡介：glitch-canvas [官方網站在線演示]（https://snorpey.github.io/jpg-glitch/） - 給畫布元素添加故障效果
animockup
簡介：animockup [官方網站在線演示] （https://animockup.com/）- 在瀏覽器中創建動畫模型，並導出為視頻或動畫GIF
物理引擎
物理引擎使用質量、速度、摩擦力和空氣阻力等變量，模擬了一個近似真實的物理系統，為剛性物體賦予真實的物理效果，比如重力、旋轉和碰撞等效果，讓物體的行為表現的更加趨向真實。例如，守望先鋒的英雄在跳起時，系統所設置的重力參數就決定了他能跳多高，下落時的速度有多快，子彈的飛行軌跡等等。
matter.js
簡介： matter.js是一個用於 Web 的 JavaScript 2D 物理引擎庫 matter.js官方地址（https://brm.io/matter-js/demo/#wreckingBall）
matter.js相較於老牌的 Box2D 引擎庫更為輕量級（壓縮版僅有 87 KB），並且在性能和功能方面也不遜色。
流程圖/組織圖/圖編輯等
工業軟體開發，一直是軟體領域複雜而又重要的一環。其對技術人的要求要是更高的，下面看看有哪些可以輔助我們快速開發的庫或者參考的場景吧。
gojs
簡介： gojs是一款可以非常方便的開發交互式流程圖、組織結構圖、設計工具、規劃工具、可視化語言的JavaScript圖表庫。 gojs.js官方地址（https://gojs.net/latest/）
- GoJS用自定義模板和布局組件簡化了節點、連結和分組。
- 給用戶交互提供了許多先進的功能，如拖拽、複製、粘貼、文本編輯、工具提示、上下文菜單、自動布局、模板、數據綁定和模型、事務狀態和撤銷管理、調色板、概述、事件處理程序、命令和自定義操作的擴展工具系統。
文檔中提供了大量的demo可供參考，基本對於常見的圖編輯程序做到了全覆蓋。
butterfly
簡介：butterfly [官方網站在線演示] （https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis）一個基於JS的數據驅動的節點式編排組件庫，同時適用於React/Vue2組件。
- 豐富的DEMO，開箱即用
- 全方位管理畫布，開發者只需要更專註定制化的需求
- 利用DOM/REACT/VUE來定製元素；靈活性，可塑性，拓展性優秀
- 提供了中文文檔，這點對英文不好的小夥伴很Nice
wireflow
簡介：wireflow [官方在線演示]（https://app.wireflow.co/） 用戶流程圖實時協作工具。
- Wireflow 有超過 100 種自定義構建圖形/卡可供使用，涵蓋了大多數 Web 元素、交互和使用案例。
- Wireflow 考慮到了協作。您可以邀請您的同事和他們一起實時設計下一個項目的用戶流程。
- 它具有內置的實時聊天功能，讓您能夠與您的隊友進行交流，並且在您實時協作時仍然在同一個應用程式中。
flowy
簡介：Flowy [官方在線演示]（https://alyssax.com/x/flowy） - 用於創建流程圖的最小javascript庫。使創建具有流程圖功能的 WebApp 成為一項非常簡單的任務。通可以在幾分鐘內構建自動化軟體、思維導圖工具或簡單的編程平台。
- 響應式拖放、自動捕捉、自動滾動
- 塊重排、刪除塊、自動塊居中
- 條件捕捉、條件塊移除、無依賴項
Workflow Designer
簡介：Workflow Designer [官方在線示例] （https://guozhaolong.github.io/wfd/）- 基於G6和React的可視化流程編輯器。
web-pdm
簡介：web-pdm [在線示例]（https://erd.zyking.xyz/demo） - 用G6做的ER圖工具，最終目標是想做成在線版的powerdesigner.
X-Flowchart-Vue
簡介：X-Flowchart-Vue [官方在線演示] （http://oxoyo.co/X-Flowchart-Vue/）- 基於G6和Vue的可視化圖形編輯器。
OrgChart
簡介：OrgChart [官方在線演示] （https://dabeng.github.io/OrgChart/）- 簡單直接的組織圖插件
welabx-g6
簡介：welabx-g6 [官方在線示例] （https://claudewowo.github.io/welabx-g6/dist/?_blank）- 基於G6和Vue的流程圖編輯器。
全景圖/AR/VR
5g的普及、虛擬實境/增強現實落地、元宇宙的火熱......似乎讓Canvas再度推上了技術的頂峰。下面讓我來看看開發這些場景常見的Canvas庫吧。
Pannellum
簡介：Pannellum [官方在線演示] （https://pannellum.org/）- 輕量、免費、開源的web全景查看器。
Panolens.js
簡介：Panolens.js [官方在線演示] （https://pchen66.github.io/Panolens/）- Panolens.js基於Three.JS，主要研究領域是全景、虛擬實境和潛在的增強現實。
JS-Cloudimage-360-View
簡介：JS-Cloudimage-360-View [官方在線演示] （https://scaleflex.github.io/js-cloudimage-360-view/）一個簡單的、交互式的資源，可以用來提供您的產品的虛擬遊覽。
A-Frame
簡介：A-Frame [官方在線演示]（https://aframe.io/） A-Frame 除了幫助您構建 360 度媒體播放器外，它還提供了許多附加功能。其他功能可幫助您增強網站的虛擬實境體驗。
3D庫
three.js
簡介：three.js [官方在線演示]（https://threejs.org/examples/） - 創建易於使用、輕量級、跨瀏覽器的通用3d js庫。three.js就不多介紹了，大家想必都很熟悉。
zdog
簡介：zdog [官方在線演示]（https://zzz.dog/） - 基於canvas和SVG設計師友好的偽3D引擎
seen.js
簡介：seen [官方在線演示] （http://seenjs.io/）- 使用SVG或Canvas渲染3D場景。
Oimo.js
簡介：Oimo.js [官方在線演示]（http://lo-th.github.io/Oimo.js/index.html#basic） - 輕量級的JS 3D物理引擎。
phoria.js
簡介：phoria.js [官方在線演示]（http://www.kevs3d.co.uk/dev/phoria/index.html） - 用於在 HTML5 畫布 2D 渲染器上進行簡單 3D 圖形和可視化的 JavaScript 庫。它不使用 WebGL。適用於所有 HTML5 瀏覽器，包括桌面、iOS 和 Android。
原文來自：https://juejin.cn/post/7038267477121302542