大廠技術(shù)??高級前端??Node進(jìn)階

點(diǎn)擊上方?程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

Canvas技術(shù)的誕生可謂是讓繪圖技術(shù)如虎添翼，本文將推薦一系列Canvas圖形繪制、流程圖、組織圖、甘特圖、全景圖、3D庫、VR/AR、圖像編輯等方面的庫，希望助你在Canvas繪圖時尋得一把趁手的利器。

同時，愣錘也將Canvas的相關(guān)資源進(jìn)行的收錄整理分類，更多的資源請關(guān)注Github項(xiàng)目地址awesome-canvas。目前該庫持續(xù)維護(hù)中，已收錄大約200+的Canvas庫，以及資源網(wǎng)址、插件、書籍、博客等資源。

圖形處理庫

圖形繪制是Canvas中最基本的內(nèi)容，但是Canvas本身提供的api比較基礎(chǔ)，開發(fā)起來低效。而且也缺少完整的事件系統(tǒng)、區(qū)域監(jiān)測、緩存等等。下面讓我們來看幾款高效的圖形處理庫吧。

Konva

簡介：Konva是一個 HTML5 Canvas JavaScript 框架, 通過擴(kuò)展 Canvas 的 2D Context 讓桌面端和移動端Canvas支持交互性，使其支持高性能動畫、過渡、節(jié)點(diǎn)嵌套、分層、過濾、緩存、事件處理等等。Konva傳送門

除上述之外，文檔相對友好，但也僅僅是相對于同類庫的文檔友好那么一滴滴，社區(qū)有維護(hù)一個中文文檔。

fabric.js

簡介：「Fabric.js」是一個可以輕松處理 HTML5 Canvas元素的框架，使得Canvas元素支持「交互式對象模型」，同時也是一個「SVG-to-Canvas」和「Canvas-to-SVG」的解析器 fabric.js傳送門

fabricjs是和konva同類型但是比konva更老牌的一個的Canvas庫，目前github上Star數(shù)

更多示例如下圖所示：

「更多關(guān)于Canvas圖形處理的資源，請?jiān)L問Github項(xiàng)目地址awesome-canvas?！?/strong>

圖像編輯

市面上圖像編輯的軟件有很多，像大家所熟知的PS、sketch、axure、激萌、剪映等等。那么如果我們想開發(fā)類似的軟件，有沒有可以使用的庫或者參考的開源軟件呢？

miniPaint

簡介：miniPaint [在線演示] - 在線版的PS。PS這款軟件大家都不陌生，web版本的如何呢？請看下圖：

DarkroomJS

簡介：DarkroomJS [在線演示] - 基于Fabricjs的瀏覽器端可擴(kuò)展的圖像編輯工具

fabric-brush

簡介：fabric-brush [在線演示] - 基于Fabric.js的Canvas筆刷工具

fabricjs-image-editor-origin

簡介：fabricjs-image-editor-origin [在線演示] - Fabricjs圖像編輯器

react-sketch

簡介：react-sketch [在線演示] - 基于React、Fabricjs的素描應(yīng)用

glitch-canvas

簡介：glitch-canvas [在線演示] - 給畫布元素添加故障效果

animockup

簡介：animockup [在線演示] - 在瀏覽器中創(chuàng)建動畫模型，并導(dǎo)出為視頻或動畫GIF

「更多關(guān)于Canvas圖像編輯/畫板的資源，請?jiān)L問Github項(xiàng)目地址awesome-canvas?！?/strong>

物理引擎

物理引擎使用質(zhì)量、速度、摩擦力和空氣阻力等變量，模擬了一個近似真實(shí)的物理系統(tǒng)，為剛性物體賦予真實(shí)的物理效果，比如重力、旋轉(zhuǎn)和碰撞等效果，讓物體的行為表現(xiàn)的更加趨向真實(shí)。例如，守望先鋒的英雄在跳起時，系統(tǒng)所設(shè)置的重力參數(shù)就決定了他能跳多高，下落時的速度有多快，子彈的飛行軌跡等等。

matter.js

簡介：「matter.js」是一個用于 Web 的 JavaScript 2D 物理引擎庫 matter.js傳送門

matter.js相較于老牌的 Box2D 引擎庫更為輕量級（壓縮版僅有 87 KB），并且在性能和功能方面也不遜色。

「更多關(guān)于Canvas物理引擎的資源，請?jiān)L問Github項(xiàng)目地址awesome-canvas?！?/strong>

流程圖/組織圖/圖編輯等

工業(yè)軟件開發(fā)，一直是軟件領(lǐng)域復(fù)雜而又重要的一環(huán)。其對技術(shù)人的要求要是更高的，下面看看有哪些可以輔助我們快速開發(fā)的庫或者參考的場景吧。

gojs

簡介：「gojs」是一款可以非常方便的開發(fā)交互式流程圖、組織結(jié)構(gòu)圖、設(shè)計(jì)工具、規(guī)劃工具、可視化語言的JavaScript圖表庫。gojs.js傳送門

• GoJS用自定義模板和布局組件簡化了節(jié)點(diǎn)、鏈接和分組。
• 給用戶交互提供了許多先進(jìn)的功能，如拖拽、復(fù)制、粘貼、文本編輯、工具提示、上下文菜單、自動布局、模板、數(shù)據(jù)綁定和模型、事務(wù)狀態(tài)和撤銷管理、調(diào)色板、概述、事件處理程序、命令和自定義操作的擴(kuò)展工具系統(tǒng)。

文檔中提供了大量的demo可供參考，基本對于常見的圖編輯程序做到了全覆蓋。

butterfly

簡介：butterfly [在線演示] 一個基于JS的數(shù)據(jù)驅(qū)動的節(jié)點(diǎn)式編排組件庫，同時適用于React/Vue2組件。

• 豐富的DEMO，開箱即用
• 全方位管理畫布，開發(fā)者只需要更專注定制化的需求
• 利用DOM/REACT/VUE來定制元素；靈活性，可塑性，拓展性優(yōu)秀
• 提供了中文文檔，這點(diǎn)對英文不好的小伙伴很Nice

wireflow

簡介：wireflow [在線演示] 用戶流程圖實(shí)時協(xié)作工具。

• Wireflow 有超過 100 種自定義構(gòu)建圖形/卡可供使用，涵蓋了大多數(shù) Web 元素、交互和使用案例。
• Wireflow 考慮到了協(xié)作。您可以邀請您的同事和他們一起實(shí)時設(shè)計(jì)下一個項(xiàng)目的用戶流程。
• 它具有內(nèi)置的實(shí)時聊天功能，讓您能夠與您的隊(duì)友進(jìn)行交流，并且在您實(shí)時協(xié)作時仍然在同一個應(yīng)用程序中。

flowy

簡介：Flowy [在線演示] - 用于創(chuàng)建流程圖的最小javascript庫。使創(chuàng)建具有流程圖功能的 WebApp 成為一項(xiàng)非常簡單的任務(wù)。通可以在幾分鐘內(nèi)構(gòu)建自動化軟件、思維導(dǎo)圖工具或簡單的編程平臺。

• 響應(yīng)式拖放、自動捕捉、自動滾動
• 塊重排、刪除塊、自動塊居中
• 條件捕捉、條件塊移除、無依賴項(xiàng)

Workflow Designer

簡介：Workflow Designer [在線示例] - 基于G6和React的可視化流程編輯器。

web-pdm

簡介：web-pdm [在線示例] - 用G6做的ER圖工具，最終目標(biāo)是想做成在線版的powerdesigner.

X-Flowchart-Vue

簡介：X-Flowchart-Vue [在線演示] - 基于G6和Vue的可視化圖形編輯器。

OrgChart

簡介：OrgChart [在線演示] - 簡單直接的組織圖插件

welabx-g6

簡介：welabx-g6 [在線示例] - 基于G6和Vue的流程圖編輯器。

「更多關(guān)于Canvas圖編輯的資源，請?jiān)L問Github項(xiàng)目地址awesome-canvas?！?/strong>

全景圖/AR/VR

5g的普及、虛擬現(xiàn)實(shí)/增強(qiáng)現(xiàn)實(shí)落地、元宇宙的火熱......似乎讓Canvas再度推上了技術(shù)的頂峰。下面讓我來看看開發(fā)這些場景常見的Canvas庫吧。

Pannellum

簡介：Pannellum [在線演示] - 輕量、免費(fèi)、開源的web全景查看器。

Panolens.js

簡介：Panolens.js [在線演示] - Panolens.js基于Three.JS，主要研究領(lǐng)域是全景、虛擬現(xiàn)實(shí)和潛在的增強(qiáng)現(xiàn)實(shí)。

JS-Cloudimage-360-View

簡介：JS-Cloudimage-360-View [在線演示] 一個簡單的、交互式的資源，可以用來提供您的產(chǎn)品的虛擬游覽。

A-Frame

簡介：A-Frame [在線演示] A-Frame 除了幫助您構(gòu)建 360 度媒體播放器外，它還提供了許多附加功能。其他功能可幫助您增強(qiáng)網(wǎng)站的虛擬現(xiàn)實(shí)體驗(yàn)。

「更多關(guān)于Canvas全景圖/AR/VR的資源，請?jiān)L問Github項(xiàng)目地址awesome-canvas?！?/strong>

3D庫

three.js

簡介：three.js [在線演示] - 創(chuàng)建易于使用、輕量級、跨瀏覽器的通用3d js庫。three.js就不多介紹了，大家想必都很熟悉。

zdog

簡介：zdog [在線演示] - 基于canvas和SVG設(shè)計(jì)師友好的偽3D引擎

seen.js

簡介：seen [在線演示] - 使用SVG或Canvas渲染3D場景。

Oimo.js

簡介：Oimo.js [在線演示] - 輕量級的JS 3D物理引擎。

phoria.js

簡介：phoria.js [在線演示] - 用于在 HTML5 畫布 2D 渲染器上進(jìn)行簡單 3D 圖形和可視化的 JavaScript 庫。它不使用 WebGL。適用于所有 HTML5 瀏覽器，包括桌面、iOS 和 Android。

「更多關(guān)于Canvas 3D的資源，請?jiān)L問Github項(xiàng)目地址awesome-canvas?！?/strong>