AAA级久久久精品无码区,久久人妻AV中文字幕,久久精品天天中文字幕人妻

Top 8 JavaScript Drawing Libraries: Free and Open-Source

圖像和動畫引人入勝、有趣，非常適合傳達(dá)僅用書面文字難以處理和理解的信息。對于用相機(jī)拍攝的照片以及使用計(jì)算機(jī)創(chuàng)建的繪圖來說都是如此。在這篇文章中，我將向您展示一些最好的免費(fèi)開源 JavaScript 繪圖庫。

有很多免費(fèi)庫使用 HTML5 canvas 元素和 SVG 等技術(shù)在瀏覽器中繪制您想要的任何內(nèi)容。您不僅可以使用這些庫提供的 API 進(jìn)行繪制，還可以對您創(chuàng)建的任何內(nèi)容進(jìn)行動畫處理。

讓我們開始吧。

兩個.js

在使用 JavaScript 繪制 2D 形狀方面，Two.js 是一個非常流行且易于使用的庫。它有很好的文檔記錄，您只需花費(fèi)很少的時間來學(xué)習(xí)基礎(chǔ)知識。

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

您會喜歡這個圖書館的兩件事。首先，它與渲染無關(guān)。這意味著您可以使用相同的 API 通過 SVG 或 WebGL 在畫布元素上繪制圖形。當(dāng)我使用這個庫時，這個功能已經(jīng)多次拯救了我。其次，該庫還具有內(nèi)置功能，可以為您在屏幕上繪制的任何內(nèi)容添加動畫效果。

您還可以通過監(jiān)聽不同的鍵盤和鼠標(biāo)事件來更新在屏幕上繪制的不同元素的大小、位置和顏色，從而更輕松地創(chuàng)建簡單的游戲。

Jono Brandel 的上述示例使用 Two.js 在畫布上創(chuàng)建動畫波浪形道路。您可以在官方網(wǎng)站上找到更多有趣的項(xiàng)目。

Paper.js

Paper.js 庫是為想要使用 JavaScript 繪圖的人們提供的另一個免費(fèi)開源解決方案。該庫使用 canvas 來處理其繪圖動畫。然而，它的主要重點(diǎn)是基于矢量的繪圖而不是光柵圖像。

有兩個選項(xiàng)可供您使用該庫創(chuàng)建圖形。您可以繼續(xù)使用常規(guī) JavaScript，也可以考慮使用該庫稱為 PaperScript 的 JavaScript 修改版本。使用 PaperScript 需要您花費(fèi)一些額外的時間來學(xué)習(xí)如何使用它。但是，它具有一些優(yōu)點(diǎn)，例如整個庫中使用的 Point 和 Size 對象的計(jì)算更容易。

您可以使用該庫做很多有趣的事情，包括嵌套層、簡單路徑和復(fù)合路徑等功能。您還可以平滑使用庫繪制的曲線。您還可以使用混合模式使不同元素之間的重疊更具視覺吸引力。

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

P5.js

對于那些正在尋找一個沒有陡峭學(xué)習(xí)曲線但可以在必要時創(chuàng)建非常復(fù)雜系統(tǒng)的庫的人來說，p5.js 庫是一個很好的選擇。官網(wǎng)的 P5.js 入門頁面有一個功能示例，只需幾行代碼，鼠標(biāo)移動到哪里就畫出圓圈。

該庫的靈感來自流行的 Java 處理平臺，它有一個活躍的社區(qū)，可以在您遇到困難時為您提供幫助。有很多可用的示例展示了該庫的能力。當(dāng)您尋找靈感時，它們會提供很大的幫助。您可以使用它們來學(xué)習(xí)如何模擬物理、創(chuàng)建粒子系統(tǒng)以及對不同的用戶輸入做出反應(yīng)。

Johan Karlsson 的上述示例使用 p5.js 創(chuàng)建一些在畫布上隨機(jī)移動的小昆蟲。單擊演示中的任意位置將創(chuàng)建一組隨機(jī)放置的新蚊蟲。

康瓦

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

這個庫的特殊之處在于它允許您將事件處理程序附加到您在屏幕上繪制的任何內(nèi)容。您可以選擇畫布上先前繪制的對象并在其周圍移動。還可以縮放和旋轉(zhuǎn)選定的對象，而不影響您繪制的任何其他內(nèi)容。

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

上面的簡單益智游戲是 Jakub Bene? 使用 Konva 構(gòu)建的。基本思想是選擇顏色與其他顏色略有不同的框。

Fabric.js

Fabric.js 庫的構(gòu)建理念與 Konva 相同，并且具有許多相同的功能。事實(shí)上，F(xiàn)abric.js 實(shí)際上似乎比 Konva 更受歡迎、更活躍。

該庫提供了一個構(gòu)建在 canvas 元素之上的交互式對象模型。這基本上意味著您可以在畫布上繪制不同的對象，例如幾何形狀和圖像，以便稍后與它們交互。該庫使您的用戶可以選擇移動、縮放和旋轉(zhuǎn)他們在畫布上繪制的任何內(nèi)容，從而允許您構(gòu)建簡單的模型應(yīng)用程序、模因生成器等。

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

Snap.svg

對于想要使用 SVG 和 JavaScript 的強(qiáng)大功能創(chuàng)建與分辨率無關(guān)的矢量圖形的人們來說，Snap.svg 庫是一個流行的選擇。該庫是開源的并且完全免費(fèi)使用。

它配備了一個干凈而強(qiáng)大的 API，可以對任何現(xiàn)有的 SVG 內(nèi)容進(jìn)行操作和動畫處理，以及動態(tài)生成 SVG 內(nèi)容。該庫的開發(fā)考慮到了對 IE9 及更高版本的支持。這使得開發(fā)人員可以更輕松地提供遮罩、剪切和模式等功能，而無需擔(dān)心對舊瀏覽器的支持。

易于使用的庫提供了許多方法來創(chuàng)建基本形狀并使用鍵值對應(yīng)用屬性，例如 fill、Stroke 和 StrokeWidth。您還可以將元素分組在一起以一次對多個項(xiàng)目進(jìn)行更改。不同的對象可以通過名稱或適當(dāng)?shù)?CSS 選擇器輕松引用。請查看下面由 Ronan Levesque 編寫的示例。

SVG.js

如果您想使用 JavaScript 繪制 SVG 并為其制作動畫，另一個流行的選擇是使用 SVG.js 庫。該庫開發(fā)人員的目標(biāo)是使其盡可能小且盡可能快，同時提供幾乎完整的 SVG 規(guī)范覆蓋。沒有依賴關(guān)系，可以獨(dú)立使用該庫。

您可以在網(wǎng)站主頁上查看它相對于 Vanilla JS 和 Snap.svg 的性能。可以創(chuàng)建基本形狀并使用內(nèi)置函數(shù)將它們添加到 DOM。該庫附帶了各種函數(shù)來操縱您在屏幕上繪制的任何內(nèi)容的外觀。它還支持事件偵聽器，以便您可以實(shí)現(xiàn)基于用戶交互更改任何 SVG 元素或?yàn)槠湓O(shè)置動畫的功能。

嘗試更改上述 George Francis 的 CodePen 中不同選項(xiàng)的值，以使用 SVG.js 生成獨(dú)特的模式。