8 Perpustakaan Lukisan JavaScript Teratas: Percuma dan Sumber Terbuka

Imej dan animasi menarik, menyeronokkan dan sesuai untuk menyampaikan maklumat yang sukar diproses dan difahami menggunakan perkataan bertulis sahaja. Ini benar untuk foto yang diambil dengan kamera serta lukisan yang dibuat menggunakan komputer. Dalam artikel ini, saya akan menunjukkan kepada anda beberapa perpustakaan lukisan JavaScript sumber terbuka dan percuma yang terbaik.

Terdapat banyak perpustakaan percuma untuk melukis apa sahaja yang anda inginkan dalam penyemak imbas menggunakan teknologi seperti elemen kanvas HTML5 dan SVG. Anda bukan sahaja boleh melukis menggunakan API yang disediakan oleh perpustakaan ini, anda juga boleh menganimasikan apa sahaja yang anda buat. 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

Jom mulakan.

Dua .js

Dua perkara yang anda akan suka tentang perpustakaan ini. Pertama sekali, ia tiada kaitan dengan rendering. Ini bermakna anda boleh menggunakan API yang sama untuk melukis grafik pada elemen kanvas melalui SVG atau WebGL. Ciri ini telah menyelamatkan saya berkali-kali apabila saya menggunakan perpustakaan ini. Kedua, perpustakaan juga mempunyai fungsi terbina dalam untuk menghidupkan apa sahaja yang anda lukis pada skrin.

Anda juga boleh mencipta permainan ringkas dengan lebih mudah dengan mendengar acara papan kekunci dan tetikus yang berbeza untuk mengemas kini saiz, kedudukan dan warna elemen berbeza yang dilukis pada skrin.

Pustaka Paper.js ialah satu lagi penyelesaian sumber terbuka dan percuma untuk orang yang ingin melukis menggunakan JavaScript. Pustaka menggunakan kanvas untuk mengendalikan animasi lukisannya. Walau bagaimanapun, tumpuan utamanya adalah pada lukisan berasaskan vektor dan bukannya imej raster.

Terdapat dua pilihan untuk anda membuat grafik menggunakan perpustakaan ini. Anda boleh terus menggunakan JavaScript biasa, atau pertimbangkan untuk menggunakan versi pustaka yang diubah suai yang dipanggil PaperScript. Menggunakan PaperScript memerlukan anda meluangkan sedikit masa untuk mempelajari cara menggunakannya. Walau bagaimanapun, ia mempunyai beberapa kelebihan, seperti pengiraan lebih mudah bagi objek Point dan Size yang digunakan di seluruh perpustakaan.

Anda boleh melakukan banyak perkara menarik dengan pustaka ini, termasuk ciri seperti lapisan bersarang, laluan mudah dan laluan kompaun. Anda juga boleh melicinkan lengkung yang dilukis menggunakan perpustakaan. Anda juga boleh menggunakan mod pengadunan untuk menjadikan pertindihan antara elemen berbeza lebih menarik secara visual.

CodePen oleh Alberto Jerez di atas menggunakan sekumpulan lapisan dan fungsi penggubahan ini untuk mencipta kesan yang menarik, dengan bulatan yang berubah bentuk apabila berlanggar.

🎜P5.js🎜 🎜Perpustakaan p5.js ialah pilihan yang bagus untuk mereka yang mencari perpustakaan yang tidak mempunyai keluk pembelajaran yang curam tetapi boleh mencipta sistem yang sangat kompleks jika perlu. Halaman masukan P5.js di tapak web rasmi mempunyai contoh berfungsi Dengan hanya beberapa baris kod, bulatan boleh dilukis di mana-mana tetikus bergerak. 🎜 🎜Pustaka ini diilhamkan oleh platform pemprosesan Java yang popular dan mempunyai komuniti aktif yang boleh membantu anda apabila anda tersekat. Terdapat banyak contoh yang tersedia yang menunjukkan keupayaan perpustakaan ini. Mereka boleh sangat membantu apabila anda mencari inspirasi. Anda boleh menggunakannya untuk mempelajari cara mensimulasikan fizik, mencipta sistem zarah dan bertindak balas kepada input pengguna yang berbeza. 🎜 🎜🎜🎜🎜 🎜Contoh Johan Karlsson di atas menggunakan p5.js untuk mencipta beberapa serangga kecil yang bergerak secara rawak di sekeliling kanvas. Mengklik mana-mana sahaja dalam demo akan mencipta set baru nyamuk yang diletakkan secara rawak. 🎜 🎜Kangwa🎜 🎜Perpustakaan Konva sedikit berbeza daripada perpustakaan yang saya nyatakan setakat ini. Anda boleh menggunakannya untuk melukis bentuk asas pada kanvas, tetapi anda boleh melakukan lebih banyak lagi. Anda boleh menambah animasi dan peralihan berprestasi tinggi untuk menambah daya tarikan visual pada apa sahaja yang anda lukis pada kanvas. 🎜 🎜Apa yang istimewa tentang perpustakaan ini ialah ia membolehkan anda melampirkan pengendali acara pada apa sahaja yang anda lukis pada skrin. Anda boleh memilih objek yang dilukis sebelum ini pada kanvas dan menggerakkannya. Anda juga boleh menskala dan memutar objek terpilih tanpa menjejaskan apa-apa lagi yang anda lukis. 🎜 🎜Ciri ini sesuai untuk mereka yang mahukan perpustakaan untuk membantu mereka mencipta aplikasi lakaran mudah dan permainan seret dan lepas di atas kanvas. Anda boleh menggunakan kumpulan untuk menggerakkan dan memanipulasi berbilang bentuk bersama-sama. 🎜

Permainan teka-teki mudah di atas dibina menggunakan Konva oleh Jakub Beneš. Idea asasnya ialah memilih kotak dengan warna yang sedikit berbeza daripada yang lain.

Fabric.js

Perpustakaan

Fabric.js dibina dengan falsafah yang sama seperti Konva dan mempunyai banyak ciri yang sama. Malah, Fabric.js sebenarnya kelihatan lebih popular dan aktif daripada Konva.

Pustaka ini menyediakan model objek interaktif yang dibina di atas elemen kanvas. Ini pada asasnya bermakna anda boleh melukis objek yang berbeza seperti bentuk geometri dan imej pada kanvas untuk berinteraksi dengannya kemudian. Pustaka ini memberi pengguna anda pilihan untuk mengalih, menskala dan memutar apa sahaja yang mereka lukis pada kanvas, membolehkan anda membina aplikasi mockup mudah, penjana meme dan banyak lagi. canvas 元素之上的交互式对象模型。这基本上意味着您可以在画布上绘制不同的对象，例如几何形状和图像，以便稍后与它们交互。该库使您的用户可以选择移动、缩放和旋转他们在画布上绘制的任何内容，从而允许您构建简单的模型应用程序、模因生成器等。

尝试在上面 Martin Florian 的 CodePen 的画布上拖动文本或添加您自己的形状和图像。图书馆的主页展示了更多功能，例如手绘图以及使用图案和渐变来填充形状。

Snap.svg

对于想要使用 SVG 和 JavaScript 的强大功能创建与分辨率无关的矢量图形的人们来说，Snap.svg 库是一个流行的选择。该库是开源的并且完全免费使用。

它配备了一个干净而强大的 API，可以对任何现有的 SVG 内容进行操作和动画处理，以及动态生成 SVG 内容。该库的开发考虑到了对 IE9 及更高版本的支持。这使得开发人员可以更轻松地提供遮罩、剪切和模式等功能，而无需担心对旧浏览器的支持。

易于使用的库提供了许多方法来创建基本形状并使用键值对应用属性，例如 fill、Stroke 和 StrokeWidth

Cuba seret teks atau tambahkan bentuk dan imej anda sendiri pada kanvas dalam CodePen Martin Florian di atas. Halaman utama perpustakaan mempamerkan lebih banyak ciri, seperti lukisan tangan dan menggunakan corak dan kecerunan untuk mengisi bentuk.

Snap.svg

Pustaka Snap.svg ialah pilihan popular untuk orang yang ingin menggunakan kuasa SVG dan JavaScript untuk mencipta grafik vektor bebas resolusi. Perpustakaan adalah sumber terbuka dan bebas sepenuhnya untuk digunakan.

Ia didatangkan dengan API yang bersih dan berkuasa yang boleh memanipulasi dan menghidupkan mana-mana kandungan SVG sedia ada, serta menjana kandungan SVG secara dinamik. Perpustakaan ini dibangunkan dengan mengambil kira sokongan untuk IE9 dan ke atas. Ini memudahkan pembangun menyediakan ciri seperti topeng, keratan dan corak tanpa perlu risau tentang sokongan untuk penyemak imbas yang lebih lama.

Pustaka yang mudah digunakan menyediakan banyak cara untuk mencipta bentuk asas dan menggunakan sifat menggunakan pasangan nilai kunci, seperti fill, Stroke dan StrokeWidth . Anda juga boleh mengumpulkan elemen bersama untuk membuat perubahan pada berbilang item sekaligus. Objek yang berbeza boleh dirujuk dengan mudah mengikut nama atau pemilih CSS yang sesuai. Lihat contoh di bawah yang ditulis oleh Ronan Levesque.

SVG.js

Jika anda ingin melukis dan menghidupkan SVG menggunakan JavaScript, pilihan popular lain ialah menggunakan perpustakaan SVG.js. Matlamat pembangun perpustakaan adalah untuk menjadikannya sekecil dan secepat mungkin sambil menyediakan liputan hampir lengkap spesifikasi SVG. Tiada kebergantungan dan perpustakaan boleh digunakan secara bebas.

Anda boleh melihat prestasinya terhadap Vanilla JS dan Snap.svg di halaman utama tapak. Anda boleh mencipta bentuk asas dan menambahkannya pada DOM menggunakan fungsi terbina dalam. Perpustakaan ini dilengkapi dengan pelbagai fungsi untuk memanipulasi penampilan apa sahaja yang anda lukis pada skrin. Ia juga menyokong pendengar acara supaya anda boleh melaksanakan keupayaan untuk menukar atau menghidupkan mana-mana elemen SVG berdasarkan interaksi pengguna.

Cuba tukar nilai pilihan berbeza dalam CodePen George Francis di atas untuk menjana corak unik menggunakan SVG.js.

rajah pemasaan JS

Perpustakaan terakhir dalam senarai kami mungkin tidak menarik minat orang ramai, tetapi ia mempunyai tujuan yang unik dan patut disebut. Pernahkah anda terlibat dalam projek di mana anda perlu melukis gambar rajah jujukan UML? Jika anda bersetuju, maka Galeri Jujukan JS mungkin sesuai untuk anda.

#🎜🎜# Pustaka ini akan mencipta rajah jujukan berasaskan SVG yang ringkas untuk anda menggunakan JavaScript. Apa yang anda perlu lakukan ialah menyediakannya dengan perwakilan teks yang sah. Satu perkara yang anda mungkin tidak suka ialah perpustakaan ini bergantung pada sekumpulan perpustakaan lain untuk berfungsi dengan baik. Ini termasuk Snap.svg, pemuat fon web, underscore.js dan jQuery sebagai pilihan. #🎜🎜# #🎜🎜##🎜🎜##🎜🎜##🎜🎜# #🎜🎜# Walau bagaimanapun, perpustakaan ini masih menjadi pilihan yang baik untuk sesiapa sahaja yang ingin menjana carta sedemikian dengan cepat tanpa perlu risau tentang menulis banyak kod. Anda juga boleh menggunakan gaya CSS anda sendiri untuk menukar warna dan mengisi komponen yang berbeza. Lihat demo E T di atas dan cuba edit kod untuk melihat bagaimana carta berubah. #🎜🎜# #🎜🎜#Fikiran Akhir#🎜🎜# #🎜🎜# Terdapat banyak perpustakaan percuma yang tersedia untuk melukis objek menggunakan JavaScript. Matlamat saya dalam artikel ini adalah untuk menyerlahkan beberapa perpustakaan popular yang mempunyai set ciri bagus yang menyelesaikan masalah unik. Semoga artikel ini membantu anda memilih perpustakaan yang boleh melukis dan menghidupkan elemen pada kanvas serta menggunakan SVG. #🎜🎜#

Atas ialah kandungan terperinci 8 Perpustakaan Lukisan JavaScript Teratas: Percuma dan Sumber Terbuka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!