Canvas技術的誕生可謂是讓繪圖技術如虎添翼，本文將推薦一系列Canvas圖形繪制、流程圖、組織圖、甘特圖、全景圖、3D庫、VR/AR、圖像編輯等方面的庫，希望助你在Canvas繪圖時尋得一把趁手的利器。
同時，愣錘也將Canvas的相關資源進行的收錄整理分類，更多的資源請關注awesome-canvas，項目地址 github.com/chinaBerg/a… 。目前該庫持續維護中，已收錄大約200+的Canvas庫，以及資源網址、插件、書籍、博客等資源。
圖形處理庫
圖形繪制是Canvas中最基本的內容，但是Canvas本身提供的api比較基礎，開發起來低效。而且也缺少完整的事件系統、區域監測、緩存等等。下面讓我們來看幾款高效的圖形處理庫吧。
Konva
簡介：Konva是一個 HTML5 Canvas JavaScript 框架, 通過擴展 Canvas 的 2D Context 讓桌面端和移動端Canvas支持交互性，使其支持高性能動畫、過渡、節點嵌套、分層、過濾、緩存、事件處理等等。Konva傳送門
除上述之外，文檔相對友好，但也僅僅是相對於同類庫的文檔友好那么一滴滴，社區有維護一個中文文檔。
fabric.js
簡介： Fabric.js是一個可以輕松處理 HTML5 Canvas元素的框架，使得Canvas元素支持交互式對象模型，同時也是一個SVG-to-Canvas和Canvas-to-SVG的解析器 fabric.js傳送門
fabricjs是和konva同類型但是比konva更老牌的一個的Canvas庫，目前github上Star數
更多示例如下圖所示：
更多關於Canvas圖形處理的資源，請訪問awesome-canvas，項目地址 github.com/chinaBerg/a…
圖像編輯
市面上圖像編輯的軟件有很多，像大家所熟知的PS、sketch、axure、激萌、剪映等等。那么如果我們想開發類似的軟件，有沒有可以使用的庫或者參考的開源軟件呢？
miniPaint
簡介：miniPaint [在線演示] - 在線版的PS。PS這款軟件大家都不陌生，web版本的如何呢？請看下圖：
DarkroomJS
簡介：DarkroomJS [在線演示] - 基於Fabricjs的瀏覽器端可擴展的圖像編輯工具
fabric-brush
簡介：fabric-brush [在線演示] - 基於Fabric.js的Canvas筆刷工具
fabricjs-image-editor-origin
簡介：fabricjs-image-editor-origin [在線演示] - Fabricjs圖像編輯器
react-sketch
簡介：react-sketch [在線演示] - 基於React、Fabricjs的素描應用
glitch-canvas
簡介：glitch-canvas [在線演示] - 給畫布元素添加故障效果
animockup
簡介：animockup [在線演示] - 在瀏覽器中創建動畫模型，並導出為視頻或動畫GIF
更多關於Canvas圖像編輯/畫板的資源，請訪問awesome-canvas，項目地址 github.com/chinaBerg/a…
物理引擎
物理引擎使用質量、速度、摩擦力和空氣阻力等變量，模擬了一個近似真實的物理系統，為剛性物體賦予真實的物理效果，比如重力、旋轉和碰撞等效果，讓物體的行為表現的更加趨向真實。例如，守望先鋒的英雄在跳起時，系統所設置的重力參數就決定了他能跳多高，下落時的速度有多快，子彈的飛行軌跡等等。
matter.js
簡介： matter.js是一個用於 Web 的 JavaScript 2D 物理引擎庫 matter.js傳送門
matter.js相較於老牌的 Box2D 引擎庫更為輕量級（壓縮版僅有 87 KB），並且在性能和功能方面也不遜色。
更多關於Canvas物理引擎的資源，請訪問awesome-canvas，項目地址 github.com/chinaBerg/a…
流程圖/組織圖/圖編輯等
工業軟件開發，一直是軟件領域復雜而又重要的一環。其對技術人的要求要是更高的，下面看看有哪些可以輔助我們快速開發的庫或者參考的場景吧。
gojs
簡介： gojs是一款可以非常方便的開發交互式流程圖、組織結構圖、設計工具、規划工具、可視化語言的JavaScript圖表庫。 gojs.js傳送門
- GoJS用自定義模板和布局組件簡化了節點、鏈接和分組。
- 給用戶交互提供了許多先進的功能，如拖拽、復制、粘貼、文本編輯、工具提示、上下文菜單、自動布局、模板、數據綁定和模型、事務狀態和撤銷管理、調色板、概述、事件處理程序、命令和自定義操作的擴展工具系統。
文檔中提供了大量的demo可供參考，基本對於常見的圖編輯程序做到了全覆蓋。
butterfly
簡介：butterfly [在線演示] 一個基於JS的數據驅動的節點式編排組件庫，同時適用於React/Vue2組件。
- 豐富的DEMO，開箱即用
- 全方位管理畫布，開發者只需要更專注定制化的需求
- 利用DOM/REACT/VUE來定制元素；靈活性，可塑性，拓展性優秀
- 提供了中文文檔，這點對英文不好的小伙伴很Nice
wireflow
簡介：wireflow [在線演示] 用戶流程圖實時協作工具。
- Wireflow 有超過 100 種自定義構建圖形/卡可供使用，涵蓋了大多數 Web 元素、交互和使用案例。
- Wireflow 考慮到了協作。您可以邀請您的同事和他們一起實時設計下一個項目的用戶流程。
- 它具有內置的實時聊天功能，讓您能夠與您的隊友進行交流，並且在您實時協作時仍然在同一個應用程序中。
flowy
簡介：Flowy [在線演示] - 用於創建流程圖的最小javascript庫。使創建具有流程圖功能的 WebApp 成為一項非常簡單的任務。通可以在幾分鍾內構建自動化軟件、思維導圖工具或簡單的編程平台。
- 響應式拖放、自動捕捉、自動滾動
- 塊重排、刪除塊、自動塊居中
- 條件捕捉、條件塊移除、無依賴項
Workflow Designer
簡介：Workflow Designer [在線示例] - 基於G6和React的可視化流程編輯器。
web-pdm
簡介：web-pdm [在線示例] - 用G6做的ER圖工具，最終目標是想做成在線版的powerdesigner.
X-Flowchart-Vue
簡介：X-Flowchart-Vue [在線演示] - 基於G6和Vue的可視化圖形編輯器。
OrgChart
簡介：OrgChart [在線演示] - 簡單直接的組織圖插件
welabx-g6
簡介：welabx-g6 [在線示例] - 基於G6和Vue的流程圖編輯器。
更多關於Canvas圖編輯的資源，請訪問awesome-canvas，項目地址 github.com/chinaBerg/a…
全景圖/AR/VR
5g的普及、虛擬現實/增強現實落地、元宇宙的火熱......似乎讓Canvas再度推上了技術的頂峰。下面讓我來看看開發這些場景常見的Canvas庫吧。
Pannellum
簡介：Pannellum [在線演示] - 輕量、免費、開源的web全景查看器。
Panolens.js
簡介：Panolens.js [在線演示] - Panolens.js基於Three.JS，主要研究領域是全景、虛擬現實和潛在的增強現實。
JS-Cloudimage-360-View
簡介：JS-Cloudimage-360-View [在線演示] 一個簡單的、交互式的資源，可以用來提供您的產品的虛擬游覽。
A-Frame
簡介：A-Frame [在線演示] A-Frame 除了幫助您構建 360 度媒體播放器外，它還提供了許多附加功能。其他功能可幫助您增強網站的虛擬現實體驗。
更多關於Canvas全景圖/AR/VR的資源，請訪問Github項目地址awesome-canvas。
3D庫
three.js
簡介：three.js [在線演示] - 創建易於使用、輕量級、跨瀏覽器的通用3d js庫。three.js就不多介紹了，大家想必都很熟悉。
zdog
簡介：zdog [在線演示] - 基於canvas和SVG設計師友好的偽3D引擎
seen.js
簡介：seen [在線演示] - 使用SVG或Canvas渲染3D場景。
Oimo.js
簡介：Oimo.js [在線演示] - 輕量級的JS 3D物理引擎。
phoria.js
簡介：phoria.js [在線演示] - 用於在 HTML5 畫布 2D 渲染器上進行簡單 3D 圖形和可視化的 JavaScript 庫。它不使用 WebGL。適用於所有 HTML5 瀏覽器，包括桌面、iOS 和 Android。
更多關於Canvas 3D的資源，請訪問awesome-canvas，項目地址 github.com/chinaBerg/a…
結尾
百尺竿頭、日進一步，我是你們的老朋友愣錘😊。
awesome-canvas精心收錄了200+的Canvas庫和對應的資源，基本覆蓋了Canvas開發領域的方方面面，而且還在持續收錄維護中。如果小伙伴們覺得收錄的還不錯，歡迎給點個Star支持一下。
最后，壹沓科技前端團隊目前擴招中，大量HC崗位，地點在上海靜安。公司主要做大數據和RPA數智化相關產品，涉及Antlr編譯、圖像引擎等內容。歡迎小伙伴們聯系我或投遞簡歷哦，期待你的加入～ 郵箱：berg.liu@1data.info
作者：愣錘
鏈接：https://juejin.cn/post/7038267477121302542
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。