前 8 個 JavaScript 繪圖函式庫：免費且開源

圖像和動畫引人入勝、有趣，非常適合傳達僅用書面文字難以處理和理解的訊息。對於用相機拍攝的照片以及使用電腦創建的繪圖都是如此。在這篇文章中，我將向您展示一些最好的免費開源 JavaScript 繪圖庫。

有許多免費函式庫使用 HTML5 canvas 元素和 SVG 等技術在瀏覽器中繪製您想要的任何內容。您不僅可以使用這些庫提供的 API 進行繪製，還可以對您創建的任何內容進行動畫處理。

讓我們開始吧。

兩個.js

在使用 JavaScript 繪製 2D 形狀方面，Two.js 是一個非常流行且易於使用的函式庫。它有很好的文檔記錄，您只需花費很少的時間來學習基礎知識。

您會喜歡這個圖書館的兩件事。首先，它與渲染無關。這意味著您可以使用相同的 API 透過 SVG 或 WebGL 在畫布元素上繪製圖形。當我使用這個函式庫時，這個功能已經多次拯救了我。其次，該庫還具有內建功能，可為您在螢幕上繪製的任何內容添加動畫效果。

您也可以透過監聽不同的鍵盤和滑鼠事件來更新螢幕上繪製的不同元素的大小、位置和顏色，更輕鬆地創建簡單的遊戲。

Jono Brandel 的上述範例使用 Two.js 在畫布上建立動畫波浪形道路。您可以在官方網站上找到更多有趣的項目。

Paper.js

Paper.js 函式庫是為想要使用 JavaScript 繪圖的人提供的另一個免費開源解決方案。該庫使用 canvas 來處理其繪圖動畫。然而，它的主要重點是基於向量的繪圖而不是光柵圖像。

有兩個選項可供您使用該庫建立圖形。您可以繼續使用常規 JavaScript，也可以考慮使用該程式庫稱為 PaperScript 的 JavaScript 修改版本。使用 PaperScript 需要您花一些額外的時間來學習如何使用它。但是，它具有一些優點，例如整個庫中使用的 Point 和 Size 物件的計算更容易。

您可以使用該程式庫做很多有趣的事情，包括巢狀層、簡單路徑和複合路徑等功能。您也可以平滑使用庫繪製的曲線。您還可以使用混合模式使不同元素之間的重疊更具視覺吸引力。

Alberto Jerez 的上述 CodePen 使用了一堆這樣的圖層和合成功能來創造有趣的效果，其中的圓圈在碰撞時會改變形狀。

P5.js

對於那些正在尋找一個沒有陡峭學習曲線但可以在必要時創建非常複雜系統的庫的人來說，p5.js 庫是一個很好的選擇。官網的 P5.js 入門頁面有一個功能範例，只需幾行程式碼，滑鼠移動到哪裡就畫出圓圈。

該庫的靈感來自流行的 Java 處理平台，它有一個活躍的社區，可以在您遇到困難時為您提供幫助。有很多可用的範例展示了該庫的能力。當您尋找靈感時，它們會提供很大的幫助。您可以使用它們來學習如何模擬物理學、創建粒子系統以及對不同的使用者輸入做出反應。

Johan Karlsson 的上述範例使用 p5.js 創建一些在畫布上隨機移動的小昆蟲。點擊演示中的任意位置將建立一組隨機放置的新蚊蟲。

康瓦

Konva 庫與我到目前為止提到的庫有點不同。您可以使用它在畫布上繪製基本形狀，但您完全有可能做更多的事情。您可以添加高性能動畫和過渡，為畫布上繪製的任何內容添加視覺吸引力。

這個庫的特殊之處在於它允許您將事件處理程序附加到您在螢幕上繪製的任何內容。您可以選擇畫布上先前繪製的物件並在其周圍移動。還可以縮放和旋轉選定的對象，而不影響您繪製的任何其他內容。

這些功能非常適合想要一個庫來幫助他們創建簡單的草圖應用程式以及在畫布上拖放遊戲的人。您可以使用群組來一起移動和操作多個形狀。

上面的簡單益智遊戲是 Jakub Beneš 使用 Konva 構建的。基本想法是選擇顏色與其他顏色略有不同的框架。

Fabric.js

Fabric.js 函式庫的建置理念與 Konva 相同，並且具有許多相同的功能。事實上，Fabric.js 實際上似乎比 Konva 更受歡迎、更活躍。

該函式庫提供了一個建構在 canvas 元素之上的互動式物件模型。這基本上意味著您可以在畫布上繪製不同的對象，例如幾何形狀和圖像，以便稍後與它們互動。該庫使您的用戶可以選擇移動、縮放和旋轉他們在畫布上繪製的任何內容，從而允許您建立簡單的模型應用程式、模因生成器等。

嘗試在上面 Martin Florian 的 CodePen 的畫布上拖曳文字或添加您自己的形狀和圖像。圖書館的主頁展示了更多功能，例如手繪圖以及使用圖案和漸變來填充形狀。

Snap.svg

對於想要使用 SVG 和 JavaScript 的強大功能來創建與解析度無關的向量圖形的人來說，Snap.svg 函式庫是一個流行的選擇。該庫是開源的並且完全免費使用。

它配備了一個乾淨而強大的 API，可以對任何現有的 SVG 內容進行操作和動畫處理，以及動態生成 SVG 內容。該程式庫的開發考慮到了對 IE9 及更高版本的支援。這使得開發人員可以更輕鬆地提供遮罩、剪切和模式等功能，而無需擔心對舊瀏覽器的支援。

易於使用的函式庫提供了許多方法來建立基本形狀並使用鍵值對應用屬性，例如 fill、Stroke 和 StrokeWidth。您也可以將元素分組在一起以一次對多個項目進行變更。不同的物件可以透過名稱或適當的 CSS 選擇器輕鬆引用。請查看下面由 Ronan Levesque 編寫的範例。

SVG.js

如果您想使用 JavaScript 繪製 SVG 並為其製作動畫，另一個受歡迎的選擇是使用 SVG.js 函式庫。該程式庫開發人員的目標是使其盡可能小且盡可能快，同時提供幾乎完整的 SVG 規範覆蓋。沒有依賴關係，可以獨立使用該函式庫。

您可以在網站主頁上查看它相對於 Vanilla JS 和 Snap.svg 的效能。可以建立基本形狀並使用內建函數將它們新增至 DOM。該庫附帶了各種函數來操縱您在螢幕上繪製的任何內容的外觀。它還支援事件偵聽器，以便您可以實現基於使用者互動更改任何 SVG 元素或為其設定動畫的功能。

嘗試變更上述 George Francis 的 CodePen 中不同選項的值，以使用 SVG.js 產生獨特的模式。

JS 時序圖

我們清單中的最後一個庫可能不會吸引大眾，但它確實有一個獨特的用途，值得一提。您是否曾經參與過必須繪製 UML 序列圖的專案？如果您同意，那麼 JS 序列圖庫可能非常適合您。

該程式庫將使用 JavaScript 快速為您建立一個簡單的基於 SVG 的序列圖。您所需要做的就是為其提供有效的文字表示。您可能不喜歡的一件事是該庫依賴一堆其他庫才能正常工作。這包括 Snap.svg、Web 字體載入器、underscore.js 和可選的 jQuery。

但是，對於任何想要快速生成此類圖表而不用擔心編寫大量程式碼的人來說，該庫仍然是一個不錯的選擇。您也可以套用自己的 CSS 樣式來變更不同元件的顏色和填滿。看看 E T 上面的演示，並嘗試編輯程式碼以查看圖表如何變化。

最終想法

有許多免費函式庫可用於使用 JavaScript 繪製物件。我在這篇文章中的目標是強調一些流行的庫，這些庫具有解決獨特問題的不錯的功能集。希望本文能幫助您選擇一個可以在畫布上以及使用 SVG 繪製元素並為其添加動畫效果的庫。

以上是前 8 個 JavaScript 繪圖函式庫：免費且開源的詳細內容。更多資訊請關注PHP中文網其他相關文章！