.jpg)
圖像和動(dòng)畫引人入勝、有趣，非常適合傳達(dá)僅用書面文字難以處理和理解的信息。對(duì)于用相機(jī)拍攝的照片以及使用計(jì)算機(jī)創(chuàng)建的繪圖來(lái)說(shuō)都是如此。在這篇文章中，我將向您展示一些最好的免費(fèi)開(kāi)源 JavaScript 繪圖庫(kù)。
有很多免費(fèi)庫(kù)使用 HTML5 canvas 元素和 SVG 等技術(shù)在瀏覽器中繪制您想要的任何內(nèi)容。您不僅可以使用這些庫(kù)提供的 API 進(jìn)行繪制，還可以對(duì)您創(chuàng)建的任何內(nèi)容進(jìn)行動(dòng)畫處理。
讓我們開(kāi)始吧。
兩個(gè).js
在使用 JavaScript 繪制 2D 形狀方面，Two.js 是一個(gè)非常流行且易于使用的庫(kù)。它有很好的文檔記錄，您只需花費(fèi)很少的時(shí)間來(lái)學(xué)習(xí)基礎(chǔ)知識(shí)。
立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；
您會(huì)喜歡這個(gè)圖書館的兩件事。首先，它與渲染無(wú)關(guān)。這意味著您可以使用相同的 API 通過(guò) SVG 或 WebGL 在畫布元素上繪制圖形。當(dāng)我使用這個(gè)庫(kù)時(shí)，這個(gè)功能已經(jīng)多次拯救了我。其次，該庫(kù)還具有內(nèi)置功能，可以為您在屏幕上繪制的任何內(nèi)容添加動(dòng)畫效果。
您還可以通過(guò)監(jiān)聽(tīng)不同的鍵盤和鼠標(biāo)事件來(lái)更新在屏幕上繪制的不同元素的大小、位置和顏色，從而更輕松地創(chuàng)建簡(jiǎn)單的游戲。
Jono Brandel 的上述示例使用 Two.js 在畫布上創(chuàng)建動(dòng)畫波浪形道路。您可以在官方網(wǎng)站上找到更多有趣的項(xiàng)目。
Paper.js
Paper.js 庫(kù)是為想要使用 JavaScript 繪圖的人們提供的另一個(gè)免費(fèi)開(kāi)源解決方案。該庫(kù)使用 canvas 來(lái)處理其繪圖動(dòng)畫。然而，它的主要重點(diǎn)是基于矢量的繪圖而不是光柵圖像。
有兩個(gè)選項(xiàng)可供您使用該庫(kù)創(chuàng)建圖形。您可以繼續(xù)使用常規(guī) JavaScript，也可以考慮使用該庫(kù)稱為 PaperScript 的 JavaScript 修改版本。使用 PaperScript 需要您花費(fèi)一些額外的時(shí)間來(lái)學(xué)習(xí)如何使用它。但是，它具有一些優(yōu)點(diǎn)，例如整個(gè)庫(kù)中使用的 Point 和 Size 對(duì)象的計(jì)算更容易。
您可以使用該庫(kù)做很多有趣的事情，包括嵌套層、簡(jiǎn)單路徑和復(fù)合路徑等功能。您還可以平滑使用庫(kù)繪制的曲線。您還可以使用混合模式使不同元素之間的重疊更具視覺(jué)吸引力。
Alberto Jerez 的上述 CodePen 使用了一堆這樣的圖層和合成功能來(lái)創(chuàng)建有趣的效果，其中的圓圈在碰撞時(shí)會(huì)改變形狀。
P5.js
對(duì)于那些正在尋找一個(gè)沒(méi)有陡峭學(xué)習(xí)曲線但可以在必要時(shí)創(chuàng)建非常復(fù)雜系統(tǒng)的庫(kù)的人來(lái)說(shuō)，p5.js 庫(kù)是一個(gè)很好的選擇。官網(wǎng)的 P5.js 入門頁(yè)面有一個(gè)功能示例，只需幾行代碼，鼠標(biāo)移動(dòng)到哪里就畫出圓圈。
該庫(kù)的靈感來(lái)自流行的 Java 處理平臺(tái)，它有一個(gè)活躍的社區(qū)，可以在您遇到困難時(shí)為您提供幫助。有很多可用的示例展示了該庫(kù)的能力。當(dāng)您尋找靈感時(shí)，它們會(huì)提供很大的幫助。您可以使用它們來(lái)學(xué)習(xí)如何模擬物理、創(chuàng)建粒子系統(tǒng)以及對(duì)不同的用戶輸入做出反應(yīng)。
Johan Karlsson 的上述示例使用 p5.js 創(chuàng)建一些在畫布上隨機(jī)移動(dòng)的小昆蟲(chóng)。單擊演示中的任意位置將創(chuàng)建一組隨機(jī)放置的新蚊蟲(chóng)。
康瓦
Konva 庫(kù)與我到目前為止提到的庫(kù)有點(diǎn)不同。您可以使用它在畫布上繪制基本形狀，但您完全有可能做更多的事情。您可以添加高性能動(dòng)畫和過(guò)渡，為畫布上繪制的任何內(nèi)容添加視覺(jué)吸引力。
這個(gè)庫(kù)的特殊之處在于它允許您將事件處理程序附加到您在屏幕上繪制的任何內(nèi)容。您可以選擇畫布上先前繪制的對(duì)象并在其周圍移動(dòng)。還可以縮放和旋轉(zhuǎn)選定的對(duì)象，而不影響您繪制的任何其他內(nèi)容。
這些功能非常適合那些想要一個(gè)庫(kù)來(lái)幫助他們創(chuàng)建簡(jiǎn)單的草圖應(yīng)用程序以及在畫布上拖放游戲的人。您可以使用組來(lái)一起移動(dòng)和操作多個(gè)形狀。
上面的簡(jiǎn)單益智游戲是 Jakub Bene? 使用 Konva 構(gòu)建的?；舅枷胧沁x擇顏色與其他顏色略有不同的框。
Fabric.js
Fabric.js 庫(kù)的構(gòu)建理念與 Konva 相同，并且具有許多相同的功能。事實(shí)上，F(xiàn)abric.js 實(shí)際上似乎比 Konva 更受歡迎、更活躍。
該庫(kù)提供了一個(gè)構(gòu)建在 canvas 元素之上的交互式對(duì)象模型。這基本上意味著您可以在畫布上繪制不同的對(duì)象，例如幾何形狀和圖像，以便稍后與它們交互。該庫(kù)使您的用戶可以選擇移動(dòng)、縮放和旋轉(zhuǎn)他們?cè)诋嫴忌侠L制的任何內(nèi)容，從而允許您構(gòu)建簡(jiǎn)單的模型應(yīng)用程序、模因生成器等。
嘗試在上面 Martin Florian 的 CodePen 的畫布上拖動(dòng)文本或添加您自己的形狀和圖像。圖書館的主頁(yè)展示了更多功能，例如手繪圖以及使用圖案和漸變來(lái)填充形狀。
Snap.svg
對(duì)于想要使用 SVG 和 JavaScript 的強(qiáng)大功能創(chuàng)建與分辨率無(wú)關(guān)的矢量圖形的人們來(lái)說(shuō)，Snap.svg 庫(kù)是一個(gè)流行的選擇。該庫(kù)是開(kāi)源的并且完全免費(fèi)使用。
它配備了一個(gè)干凈而強(qiáng)大的 API，可以對(duì)任何現(xiàn)有的 SVG 內(nèi)容進(jìn)行操作和動(dòng)畫處理，以及動(dòng)態(tài)生成 SVG 內(nèi)容。該庫(kù)的開(kāi)發(fā)考慮到了對(duì) IE9 及更高版本的支持。這使得開(kāi)發(fā)人員可以更輕松地提供遮罩、剪切和模式等功能，而無(wú)需擔(dān)心對(duì)舊瀏覽器的支持。
易于使用的庫(kù)提供了許多方法來(lái)創(chuàng)建基本形狀并使用鍵值對(duì)應(yīng)用屬性，例如 fill、Stroke 和 StrokeWidth。您還可以將元素分組在一起以一次對(duì)多個(gè)項(xiàng)目進(jìn)行更改。不同的對(duì)象可以通過(guò)名稱或適當(dāng)?shù)?CSS 選擇器輕松引用。請(qǐng)查看下面由 Ronan Levesque 編寫的示例。
SVG.js
如果您想使用 JavaScript 繪制 SVG 并為其制作動(dòng)畫，另一個(gè)流行的選擇是使用 SVG.js 庫(kù)。該庫(kù)開(kāi)發(fā)人員的目標(biāo)是使其盡可能小且盡可能快，同時(shí)提供幾乎完整的 SVG 規(guī)范覆蓋。沒(méi)有依賴關(guān)系，可以獨(dú)立使用該庫(kù)。
您可以在網(wǎng)站主頁(yè)上查看它相對(duì)于 Vanilla JS 和 Snap.svg 的性能。可以創(chuàng)建基本形狀并使用內(nèi)置函數(shù)將它們添加到 DOM。該庫(kù)附帶了各種函數(shù)來(lái)操縱您在屏幕上繪制的任何內(nèi)容的外觀。它還支持事件偵聽(tīng)器，以便您可以實(shí)現(xiàn)基于用戶交互更改任何 SVG 元素或?yàn)槠湓O(shè)置動(dòng)畫的功能。
嘗試更改上述 George Francis 的 CodePen 中不同選項(xiàng)的值，以使用 SVG.js 生成獨(dú)特的模式。
JS 時(shí)序圖
我們列表中的最后一個(gè)庫(kù)可能不會(huì)吸引大眾，但它確實(shí)有一個(gè)獨(dú)特的用途，值得一提。您是否曾經(jīng)參與過(guò)必須繪制 UML 序列圖的項(xiàng)目？如果您同意，那么 JS 序列圖庫(kù)可能非常適合您。
該庫(kù)將使用 JavaScript 快速為您創(chuàng)建一個(gè)簡(jiǎn)單的基于 SVG 的序列圖。您所需要做的就是為其提供有效的文本表示。您可能不喜歡的一件事是該庫(kù)依賴于一堆其他庫(kù)才能正常工作。這包括 Snap.svg、Web 字體加載器、underscore.js 和可選的 jQuery。
但是，對(duì)于任何想要快速生成此類圖表而不用擔(dān)心編寫大量代碼的人來(lái)說(shuō)，該庫(kù)仍然是一個(gè)不錯(cuò)的選擇。您還可以應(yīng)用自己的 CSS 樣式來(lái)更改不同組件的顏色和填充?？匆幌?E T 上面的演示，并嘗試編輯代碼以查看圖表如何變化。
最終想法
有很多免費(fèi)庫(kù)可用于使用 JavaScript 繪制對(duì)象。我在這篇文章中的目標(biāo)是強(qiáng)調(diào)一些流行的庫(kù)，這些庫(kù)具有解決獨(dú)特問(wèn)題的不錯(cuò)的功能集。希望本文能幫助您選擇一個(gè)可以在畫布上以及使用 SVG 繪制元素并為其添加動(dòng)畫效果的庫(kù)。
.png)
