整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
可以使用JavaScript在瀏覽器中渲染任何您想要的內(nèi)容。這個(gè)很好的示例是這個(gè)在線建模工具列表，它可以幫助您直接在瀏覽器中輕松創(chuàng)建UML（或ER，BPMN等）圖。這些工具中的大多數(shù)都使用 JavaScript 來(lái)渲染圖形形狀并與之交互。但是，如果您想創(chuàng)建自己的圖表或構(gòu)建自己的編輯器怎么辦？別擔(dān)心，我們?yōu)槟峁┍Ｕ稀Ｔ谶@篇文章中，我們提供了一個(gè) 10+ JavaScript 繪圖庫(kù)的列表，用于編寫(xiě)您自己的可視化工具和/或?yàn)槟能浖砑右恍﹫D形建模功能。
我們將 JavaScript 繪圖庫(kù)集分為兩個(gè)主要類(lèi)別：
簡(jiǎn)而言之，如果您正在尋找一種幾乎現(xiàn)成的方法來(lái)將 JavaScript 建模庫(kù)集成到您的工具中，請(qǐng)選擇第一組中的庫(kù)。如果您正在尋找一個(gè)更可調(diào)的解決方案，并且有時(shí)間和技能進(jìn)行一些編程，請(qǐng)考慮從第二組中獲取一個(gè)庫(kù)并根據(jù)需要對(duì)其進(jìn)行個(gè)性化設(shè)置。請(qǐng)注意，我們專(zhuān)注于繪制圖表的庫(kù)，如果您只想渲染只讀圖表，您可能需要查看此文本建模工具列表。
用于繪制UML（或BPMN或ERD）圖的JavaScript庫(kù)
JointJS可用于創(chuàng)建靜態(tài)圖或完全交互式的圖工具和應(yīng)用程序構(gòu)建器。它還有一個(gè)商業(yè)版本（Rappid，見(jiàn)下文）
以下是它的一些功能：
Rappid是JointJS的商業(yè)擴(kuò)展。它是一組 JointJS 插件和其他組件，在創(chuàng)建圖表工具時(shí)提供了更多可能性和即用型功能。以下是它的一些功能：
MxGraph 是一個(gè)交互式 JavaScript HTML 5 圖表庫(kù)。mxGraph 是一個(gè)完全客戶(hù)端的庫(kù)，它使用 SVG 和 HTML 來(lái)渲染模型。例如，該庫(kù)用于 Draw.io。開(kāi)發(fā)始于 2005 年，雖然原始項(xiàng)目已存檔，但這個(gè)分支仍在繼續(xù)工作。
mxGraph 不使用第三方軟件，它不需要插件，幾乎可以集成到任何框架中。mxGraph 包包含一個(gè)用 JavaScript 編寫(xiě)的客戶(hù)端軟件，以及一系列用于各種語(yǔ)言的后端?？蛻?hù)端軟件是一個(gè)圖形組件，帶有集成到現(xiàn)有 Web 界面中的可選應(yīng)用程序包裝器?？蛻?hù)端需要 Web 服務(wù)器將所需的文件傳送到客戶(hù)端，或者可以在沒(méi)有 Web 服務(wù)器的情況下從本地文件系統(tǒng)運(yùn)行。后端可以按原樣使用，也可以以受支持的語(yǔ)言之一嵌入到現(xiàn)有服務(wù)器應(yīng)用程序中。
GoJS是一個(gè)功能豐富的JavaScript / Typescript庫(kù)，用于跨現(xiàn)代瀏覽器和平臺(tái)實(shí)現(xiàn)交互式圖表。GoJS 通過(guò)可自定義的模板和布局可以輕松構(gòu)建復(fù)雜節(jié)點(diǎn)、鏈接和組的圖表。
GoJS 為用戶(hù)交互提供了許多高級(jí)功能，例如拖放、復(fù)制和粘貼、事務(wù)狀態(tài)和撤消管理、調(diào)色板、概述、數(shù)據(jù)綁定模型、事件處理程序以及用于自定義操作的可擴(kuò)展工具系統(tǒng)。它們提供了 150 多個(gè)交互式示例，可幫助您開(kāi)始使用 BPMN、流程圖、狀態(tài)圖、可視化樹(shù)、Sankey 和數(shù)據(jù)流等圖表。該 API 有很好的文檔記錄，以確保您可以立即開(kāi)始使用。我們?cè)谶@篇文章中廣泛介紹了GoJS。
用于 UML2 圖表的 HTML5/javascript 庫(kù)。它的主要目標(biāo)是為Web開(kāi)發(fā)人員提供一種簡(jiǎn)單的方法來(lái)可視化和編輯UML模型，在我們自己的網(wǎng)站中，沒(méi)有其他外部依賴(lài)項(xiàng)，并且通過(guò)瀏覽器在客戶(hù)端完全可執(zhí)行，與此列表中的其他工具不同。jsUML2 庫(kù)提供了一個(gè) API，允許 Web 開(kāi)發(fā)人員使用最新的 Web 瀏覽器以及當(dāng)前移動(dòng)設(shè)備支持的 HTML5 技術(shù)在自己的網(wǎng)站中包含可編輯的圖表。
它為特定于 UML 的模型提供了廣泛的有趣功能。特別是，它支持所有主要的UML類(lèi)型的圖：
支持圖表元素（大小，位置，顏色等）的樣式版本，構(gòu)造型定義，將UML圖表導(dǎo)入/導(dǎo)出到XML和圖像生成。
該工具已于 2017 年停產(chǎn)，但對(duì)于所有尋找 UML JavaScript 庫(kù)的人來(lái)說(shuō)，它仍然是一個(gè)強(qiáng)大的選擇。
圖表工具是100%用JavaScript編寫(xiě)的，并使用HTML5 Canvas元素進(jìn)行繪制。該組件可以使用jQuery或Microsoft Ajax?庫(kù)進(jìn)行瀏覽器獨(dú)立層和類(lèi)型系統(tǒng)實(shí)現(xiàn)。
它帶有一組豐富的預(yù)定義形狀（用于工作流圖、流程架構(gòu)、類(lèi)圖、樹(shù),...檢查他們的樣本集合）以及定義自己的形狀和自定義選項(xiàng)（例如箭頭形狀）的可能性。為了方便 API 的使用，他們對(duì)其進(jìn)行了大量記錄。您還可以使用自動(dòng)圖形布局算法。
Nomnoml 是一個(gè)較有名的文本建模工具，能夠從文本描述中渲染 UML 圖，但它也提供了一個(gè)獨(dú)立的 JavaScript 庫(kù)，可用于在自己的網(wǎng)頁(yè)上呈現(xiàn)圖。唯一的依賴(lài)關(guān)系是 lodash 和 dagre。
與nomnoml類(lèi)似，Mermaid的主要重點(diǎn)是從文本文件生成圖表，在這種情況下，通過(guò)簡(jiǎn)單的類(lèi)似markdown的腳本語(yǔ)言。它依賴(lài)于 d3 和 dagre-d3 來(lái)提供圖形布局和繪圖庫(kù)。它提供了一個(gè)在線編輯器，但您也可以直接重用打包的美人魚(yú) API 將美人魚(yú)集成到您自己的開(kāi)發(fā)中。它主要涵蓋序列圖和流程圖。
用于創(chuàng)建和顯示圖表的核心庫(kù)。它被 BPMN.io（此庫(kù)的創(chuàng)建者）用作同一公司許多其他庫(kù)的構(gòu)建塊，用于指定業(yè)務(wù)流程模型、決策模型和案例計(jì)劃模型。
例如，bpmn-js 是渲染 BPMN 2.0 圖的.js擴(kuò)展。除了使用它來(lái)構(gòu)建工作流建模編輯器（正如他們已經(jīng)提供的那樣）之外，bpmn-js 在設(shè)計(jì)時(shí)還考慮了可擴(kuò)展性，因此您可以“輕松”構(gòu)建某種執(zhí)行/模擬引擎，例如，在其上構(gòu)建某種執(zhí)行/模擬引擎。
顧名思義，state.js 專(zhuān)注于對(duì)分層狀態(tài)機(jī)進(jìn)行建模。狀態(tài).js API 提供：
它是用TypeScript開(kāi)發(fā)的，并轉(zhuǎn)譯為JavaScript;您可以使用任何一種語(yǔ)言。 : .
Eclipse Sprotty 和 Eclipse GLSP 工具可幫助您為自己的語(yǔ)言創(chuàng)建建模環(huán)境。因此，它們不限于UML，ER或其他特定的圖表類(lèi)型。相反，這些工具提供了一個(gè)后端基礎(chǔ)結(jié)構(gòu)（基于語(yǔ)言服務(wù)器協(xié)議的圖形化），以創(chuàng)建您自己的語(yǔ)言，并提供一個(gè)基于 JS 的前端來(lái)為其構(gòu)建可視化編輯器。
提供面向圖形的建?；牡图?jí)庫(kù)（因此，我們?cè)谶@里不列出只專(zhuān)注于繪制數(shù)據(jù)可視化圖表的庫(kù)）。事實(shí)上，其中一些已被用于構(gòu)建上面列出的JavaScript建模庫(kù)。
D3.js 是一個(gè) JavaScript 庫(kù)，用于基于數(shù)據(jù)操作文檔?，F(xiàn)在，我會(huì)說(shuō)是同類(lèi)庫(kù)中最受歡迎的圖書(shū)館。
D3 可幫助您使用 HTML、SVG 和 CSS 使數(shù)據(jù)栩栩如生。D3 對(duì) Web 標(biāo)準(zhǔn)的強(qiáng)調(diào)為您提供了現(xiàn)代瀏覽器的全部功能，而無(wú)需將自己綁定到專(zhuān)有框架，將強(qiáng)大的可視化組件和數(shù)據(jù)驅(qū)動(dòng)的 DOM 操作方法相結(jié)合。D3 速度極快，支持大型數(shù)據(jù)集以及交互和動(dòng)畫(huà)的動(dòng)態(tài)行為。D3 的函數(shù)式風(fēng)格允許通過(guò)各種官方和社區(qū)開(kāi)發(fā)的模塊重用代碼。
Rapha?l 是一個(gè)小型的 JavaScript 庫(kù)，它應(yīng)該可以簡(jiǎn)化您在 Web 上使用矢量圖形的工作。例如，如果您想創(chuàng)建自己的特定圖表或圖像裁剪和旋轉(zhuǎn)小部件，則可以使用此庫(kù)簡(jiǎn)單輕松地實(shí)現(xiàn)它。Rapha?l 使用 SVG W3C 推薦和 VML 作為創(chuàng)建圖形的基礎(chǔ)。這意味著您創(chuàng)建的每個(gè)圖形對(duì)象也是一個(gè) DOM 對(duì)象，因此您可以附加 JavaScript 事件處理程序或稍后修改它們。Rapha?l的目標(biāo)是提供一個(gè)適配器，使繪制矢量藝術(shù)兼容跨瀏覽器且容易。它最近沒(méi)有更新。
使用 Draw2D Javascript 庫(kù)創(chuàng)建類(lèi)似 Visio 的繪圖、圖表或工作流編輯器。用戶(hù)界面允許使用標(biāo)準(zhǔn)瀏覽器進(jìn)行交互式繪圖。它聲稱(chēng)比拉斐爾簡(jiǎn)潔得多。即使開(kāi)發(fā)停滯不前，甚至還有一個(gè)演示頁(yè)面。
Fabric 是一個(gè) JavaScript HTML 畫(huà)布庫(kù)，在 canvas 元素之上提供了一個(gè)交互式對(duì)象模型。您可以在畫(huà)布上創(chuàng)建和填充對(duì)象;對(duì)象，如簡(jiǎn)單的幾何形狀或由多個(gè)路徑組成的復(fù)雜形狀。Fabric 還具有 SVG 到畫(huà)布（和畫(huà)布到 SVG）解析器。
Paper.js 是一個(gè)運(yùn)行在 HTML5 Canvas 之上的開(kāi)源矢量圖形腳本框架。它提供了一個(gè)干凈的場(chǎng)景圖/文檔對(duì)象模型和許多強(qiáng)大的功能來(lái)創(chuàng)建和處理矢量圖形和貝塞爾曲線，所有這些都整齊地包裝在一個(gè)精心設(shè)計(jì)、一致和干凈的編程界面中。它基于（并且在很大程度上兼容）Scriptographer，Scriptographer是Adobe Illustrator的腳本環(huán)境。
jsPlumb 提供了一種以可視化連接為核心構(gòu)建應(yīng)用程序的快速方法。s.它使用 SVG 并在 IE9 及更高版本的所有瀏覽器上運(yùn)行。JsPlumbToolkit是其商業(yè)擴(kuò)展。此商業(yè)版本包裝了社區(qū)版，重點(diǎn)關(guān)注基礎(chǔ)數(shù)據(jù)模型，以及幾個(gè)有用的 UI 功能，例如布局和提供平移/縮放功能的小部件。
一個(gè) JS 客戶(hù)端庫(kù)，用于創(chuàng)建圖形和交互式體驗(yàn)，基于處理的核心原則，使藝術(shù)家、設(shè)計(jì)師和教育工作者可以訪問(wèn)編碼。除了繪圖之外，該項(xiàng)目還提供網(wǎng)絡(luò)音頻功能，碰撞檢測(cè)，甚至從p5.js草圖生成圖形用戶(hù)界面。
高度優(yōu)化的開(kāi)源圖論網(wǎng)絡(luò)庫(kù)，可用于圖分析和可視化。與所有現(xiàn)代瀏覽器兼容，并且可通過(guò) JSON 完全（反）序列化。它還包括自動(dòng)布局，集合論和圖論的算法，從BFS到PageRank。
一個(gè)JavaScript庫(kù)，充當(dāng)dagre（在客戶(hù)端布置有向圖的javascript庫(kù)）的前端，使用D3提供實(shí)際的呈現(xiàn)。該項(xiàng)目現(xiàn)已放棄。
Vis.js 是一個(gè)基于瀏覽器的動(dòng)態(tài)可視化庫(kù)。該庫(kù)設(shè)計(jì)為易于使用，可處理大量動(dòng)態(tài)數(shù)據(jù)，并可對(duì)數(shù)據(jù)進(jìn)行操作。這個(gè)項(xiàng)目也被放棄了。
React Diagrams 是一個(gè)“一個(gè)超級(jí)簡(jiǎn)單、嚴(yán)肅的圖表庫(kù)，用 react 編寫(xiě)，只是工作”。它是一個(gè)專(zhuān)注于可視化流程和面向流程的圖表的庫(kù)。靈感來(lái)自Blender、Labview和虛幻引擎。
它完全用 Typescript 和 React 編寫(xiě)。它是完全可擴(kuò)展的，整個(gè)庫(kù)（包括其核心）可以擴(kuò)展，重新布線并重新組裝成根本不同的軟件，以滿足您自己的軟件需求。它還旨在提供良好的用戶(hù)體驗(yàn)，但確保設(shè)計(jì)人員可以盡快編輯圖表。
Tldraw是此列表中的最新條目之一。Tldraw是一個(gè)“微小的繪圖應(yīng)用程序”，提供了許多形狀來(lái)繪制簡(jiǎn)單，但清晰和優(yōu)雅的圖表，具有手繪風(fēng)格和方便的功能，如智能箭頭，捕捉和便箋。甚至還有一個(gè)VSCode擴(kuò)展。
anvas技術(shù)的誕生可謂是讓繪圖技術(shù)如虎添翼，本文將推薦一系列Canvas圖形繪制、流程圖、組織圖、甘特圖、全景圖、3D庫(kù)、VR/AR、圖像編輯等方面的庫(kù)，希望助你在Canvas繪圖時(shí)尋得一把趁手的利器。
同時(shí)，愣錘將Canvas的相關(guān)資源進(jìn)行的收錄整理分類(lèi)，更多的資源請(qǐng)關(guān)注Github項(xiàng)目地址awesome-canvas。目前該庫(kù)持續(xù)維護(hù)中，已收錄大約200+的Canvas庫(kù)，以及資源網(wǎng)址、插件、書(shū)籍、博客等資源。
圖形處理庫(kù)
圖形繪制是Canvas中最基本的內(nèi)容，但是Canvas本身提供的api比較基礎(chǔ)，開(kāi)發(fā)起來(lái)低效。而且也缺少完整的事件系統(tǒng)、區(qū)域監(jiān)測(cè)、緩存等等。下面讓我們來(lái)看幾款高效的圖形處理庫(kù)吧。
簡(jiǎn)介：Konva是一個(gè) HTML5 Canvas JavaScript 框架, 通過(guò)擴(kuò)展 Canvas 的 2D Context 讓桌面端和移動(dòng)端Canvas支持交互性，使其支持高性能動(dòng)畫(huà)、過(guò)渡、節(jié)點(diǎn)嵌套、分層、過(guò)濾、緩存、事件處理等等。Konva官方地址（https://konvajs.org/docs/sandbox/index.html）
除上述之外，文檔相對(duì)友好，但也僅僅是相對(duì)于同類(lèi)庫(kù)的文檔友好那么一滴滴，社區(qū)有維護(hù)一個(gè)中文文檔。
簡(jiǎn)介： Fabric.js是一個(gè)可以輕松處理 HTML5 Canvas元素的框架，使得Canvas元素支持交互式對(duì)象模型，同時(shí)也是一個(gè)SVG-to-Canvas和Canvas-to-SVG的解析器， fabric.js官方地址（http://fabricjs.com/demos/）
fabricjs是和konva同類(lèi)型但是比konva更老牌的一個(gè)的Canvas庫(kù)，目前github上Star數(shù)2萬(wàn)+
更多示例如下圖所示：
圖像編輯
市面上圖像編輯的軟件有很多，像大家所熟知的PS、sketch、axure、激萌、剪映等等。那么如果我們想開(kāi)發(fā)類(lèi)似的軟件，有沒(méi)有可以使用的庫(kù)或者參考的開(kāi)源軟件呢？
簡(jiǎn)介：miniPaint [官方網(wǎng)站在線演示]（https://viliusle.github.io/miniPaint/） - 在線版的PS。PS這款軟件大家都不陌生，web版本的如何呢？請(qǐng)看下圖：
簡(jiǎn)介：DarkroomJS [官方網(wǎng)站在線演示]（https://pqina.nl/pintura/?affiliate_id=854594675） - 基于Fabricjs的瀏覽器端可擴(kuò)展的圖像編輯工具
簡(jiǎn)介：fabric-brush [官方網(wǎng)站在線演示] （https://tennisonchan.github.io/fabric-brush/）- 基于Fabric.js的Canvas筆刷工具
簡(jiǎn)介：fabricjs-image-editor-origin [官方網(wǎng)站在線演示] （https://fabricjs-image-editor-f62330.netlify.app/）- Fabricjs圖像編輯器
簡(jiǎn)介：react-sketch [官方網(wǎng)站在線演示] （http://tbolis.github.io/showcase/react-sketch/）- 基于React、Fabricjs的素描應(yīng)用
簡(jiǎn)介：glitch-canvas [官方網(wǎng)站在線演示]（https://snorpey.github.io/jpg-glitch/） - 給畫(huà)布元素添加故障效果
簡(jiǎn)介：animockup [官方網(wǎng)站在線演示] （https://animockup.com/）- 在瀏覽器中創(chuàng)建動(dòng)畫(huà)模型，并導(dǎo)出為視頻或動(dòng)畫(huà)GIF
物理引擎
物理引擎使用質(zhì)量、速度、摩擦力和空氣阻力等變量，模擬了一個(gè)近似真實(shí)的物理系統(tǒng)，為剛性物體賦予真實(shí)的物理效果，比如重力、旋轉(zhuǎn)和碰撞等效果，讓物體的行為表現(xiàn)的更加趨向真實(shí)。例如，守望先鋒的英雄在跳起時(shí)，系統(tǒng)所設(shè)置的重力參數(shù)就決定了他能跳多高，下落時(shí)的速度有多快，子彈的飛行軌跡等等。
簡(jiǎn)介： matter.js是一個(gè)用于 Web 的 JavaScript 2D 物理引擎庫(kù) matter.js官方地址（https://brm.io/matter-js/demo/#wreckingBall）
matter.js相較于老牌的 Box2D 引擎庫(kù)更為輕量級(jí)（壓縮版僅有 87 KB），并且在性能和功能方面也不遜色。
流程圖/組織圖/圖編輯等
工業(yè)軟件開(kāi)發(fā)，一直是軟件領(lǐng)域復(fù)雜而又重要的一環(huán)。其對(duì)技術(shù)人的要求要是更高的，下面看看有哪些可以輔助我們快速開(kāi)發(fā)的庫(kù)或者參考的場(chǎng)景吧。
簡(jiǎn)介： gojs是一款可以非常方便的開(kāi)發(fā)交互式流程圖、組織結(jié)構(gòu)圖、設(shè)計(jì)工具、規(guī)劃工具、可視化語(yǔ)言的JavaScript圖表庫(kù)。 gojs.js官方地址（https://gojs.net/latest/）
文檔中提供了大量的demo可供參考，基本對(duì)于常見(jiàn)的圖編輯程序做到了全覆蓋。
簡(jiǎn)介：butterfly [官方網(wǎng)站在線演示] （https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis）一個(gè)基于JS的數(shù)據(jù)驅(qū)動(dòng)的節(jié)點(diǎn)式編排組件庫(kù)，同時(shí)適用于React/Vue2組件。
簡(jiǎn)介：wireflow [官方在線演示]（https://app.wireflow.co/） 用戶(hù)流程圖實(shí)時(shí)協(xié)作工具。
簡(jiǎn)介：Flowy [官方在線演示]（https://alyssax.com/x/flowy） - 用于創(chuàng)建流程圖的最小javascript庫(kù)。使創(chuàng)建具有流程圖功能的 WebApp 成為一項(xiàng)非常簡(jiǎn)單的任務(wù)。通可以在幾分鐘內(nèi)構(gòu)建自動(dòng)化軟件、思維導(dǎo)圖工具或簡(jiǎn)單的編程平臺(tái)。
簡(jiǎn)介：Workflow Designer [官方在線示例] （https://guozhaolong.github.io/wfd/）- 基于G6和React的可視化流程編輯器。
簡(jiǎn)介：web-pdm [在線示例]（https://erd.zyking.xyz/demo） - 用G6做的ER圖工具，最終目標(biāo)是想做成在線版的powerdesigner.
簡(jiǎn)介：X-Flowchart-Vue [官方在線演示] （http://oxoyo.co/X-Flowchart-Vue/）- 基于G6和Vue的可視化圖形編輯器。
簡(jiǎn)介：OrgChart [官方在線演示] （https://dabeng.github.io/OrgChart/）- 簡(jiǎn)單直接的組織圖插件
簡(jiǎn)介：welabx-g6 [官方在線示例] （https://claudewowo.github.io/welabx-g6/dist/?_blank）- 基于G6和Vue的流程圖編輯器。
全景圖/AR/VR
5g的普及、虛擬現(xiàn)實(shí)/增強(qiáng)現(xiàn)實(shí)落地、元宇宙的火熱......似乎讓Canvas再度推上了技術(shù)的頂峰。下面讓我來(lái)看看開(kāi)發(fā)這些場(chǎng)景常見(jiàn)的Canvas庫(kù)吧。
簡(jiǎn)介：Pannellum [官方在線演示] （https://pannellum.org/）- 輕量、免費(fèi)、開(kāi)源的web全景查看器。
簡(jiǎn)介：Panolens.js [官方在線演示] （https://pchen66.github.io/Panolens/）- Panolens.js基于Three.JS，主要研究領(lǐng)域是全景、虛擬現(xiàn)實(shí)和潛在的增強(qiáng)現(xiàn)實(shí)。
簡(jiǎn)介：JS-Cloudimage-360-View [官方在線演示] （https://scaleflex.github.io/js-cloudimage-360-view/）一個(gè)簡(jiǎn)單的、交互式的資源，可以用來(lái)提供您的產(chǎn)品的虛擬游覽。
簡(jiǎn)介：A-Frame [官方在線演示]（https://aframe.io/） A-Frame 除了幫助您構(gòu)建 360 度媒體播放器外，它還提供了許多附加功能。其他功能可幫助您增強(qiáng)網(wǎng)站的虛擬現(xiàn)實(shí)體驗(yàn)。
3D庫(kù)
簡(jiǎn)介：three.js [官方在線演示]（https://threejs.org/examples/） - 創(chuàng)建易于使用、輕量級(jí)、跨瀏覽器的通用3d js庫(kù)。three.js就不多介紹了，大家想必都很熟悉。
簡(jiǎn)介：zdog [官方在線演示]（https://zzz.dog/） - 基于canvas和SVG設(shè)計(jì)師友好的偽3D引擎
簡(jiǎn)介：seen [官方在線演示] （http://seenjs.io/）- 使用SVG或Canvas渲染3D場(chǎng)景。
簡(jiǎn)介：Oimo.js [官方在線演示]（http://lo-th.github.io/Oimo.js/index.html#basic） - 輕量級(jí)的JS 3D物理引擎。
簡(jiǎn)介：phoria.js [官方在線演示]（http://www.kevs3d.co.uk/dev/phoria/index.html） - 用于在 HTML5 畫(huà)布 2D 渲染器上進(jìn)行簡(jiǎn)單 3D 圖形和可視化的 JavaScript 庫(kù)。它不使用 WebGL。適用于所有 HTML5 瀏覽器，包括桌面、iOS 和 Android。
原文來(lái)自：https://juejin.cn/post/7038267477121302542
Rough.js 是一個(gè)輕量級(jí)的（大約 8k），基于 Canvas 的可以繪制出粗略的手繪風(fēng)格的圖形庫(kù)。該庫(kù)提供繪制線條、曲線、弧線、多邊形、圓形和橢圓的基礎(chǔ)能力，同時(shí)支持繪制 SVG 路徑。除此之外，Rough.js 還提供了大量的可自定義選項(xiàng)，可以調(diào)整線寬、線條顏色、填充顏色、字體樣式、背景顏色等，以使圖形更加個(gè)性化。
Github：https://github.com/rough-stuff/rough
npm install --save roughjs*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
