Panduan pemula ' s untuk melukis grafik 2D dengan dua.js

two.js adalah API yang menjadikannya mudah untuk membuat bentuk 2D dengan kod. Ikuti bersama dan anda akan belajar bagaimana untuk membuat dan menghidupkan bentuk dari JavaScript. Perpustakaan mempunyai banyak kaedah yang boleh digunakan untuk mengawal bagaimana bentuk yang berbeza muncul di skrin atau bagaimana ia animasi. Versi perpustakaan yang tidak dikompresi mempunyai saiz sekitar 128 kb, manakala versi termampat adalah 50 kb. Jika anda menggunakan versi terkini, anda boleh mengurangkan saiz perpustakaan menggunakan binaan tersuai. Sebaik sahaja anda telah menambah perpustakaan ke laman web anda, anda boleh mula melukis dan menghidupkan bentuk atau objek yang berbeza. Anda boleh lulus beberapa parameter ke dua.Makeline (x1, y1, x2, y2)

. Di sini, two.makerectangle (x, y, lebar, ketinggian)

dan dua.makecircle (x, y, radius)

dan dua.makearrow (x1, y1, x2, y2, saiz)

kaedah. Nilai Y1
• menentukan kedudukan ekor anak panah. Nilai Y2
menentukan kedudukan anak panah. Parameter kelima menentukan saiz anak panah. Anda boleh lulus senarai objek yang berbeza atau lulus pelbagai objek, laluan atau kumpulan sebagai parameter untuk kaedah ini. Ia juga akan mengembalikan nilai
• , linewidth
nilai sekaligus. Kami sebenarnya akan menetapkan kedudukan kumpulan. Oleh kerana segi empat tepat adalah sebahagian daripada kumpulan, mereka akan bergerak secara automatik. Sapukan nilai warna stroke
• yang berbeza untuk masing -masing untuk membuat sekeping seni geometri unik anda sendiri.

Mendefinisikan kecerunan dan menulis teks

anda boleh menentukan kedua -dua kecerunan linear dan radial dalam dua.js. Mendefinisikan kecerunan tidak bermakna ia akan diberikan secara automatik pada skrin, tetapi ia akan tersedia untuk anda gunakan apabila menetapkan dua.MakelineArgradient (x1, y1, x2, y2, berhenti) . Nilai -nilai baru dua.stop (offset, warna, kelegapan) , di mana dua.MakeradialGradient (x, y, radius, berhenti, fx, fy) . Dalam kes ini, nilai dua.makeText (mesej, x, y, gaya) . Ia mungkin terbukti dari nama parameter yang mesej <code>message adalah teks sebenar yang anda ingin tulis. Parameter x <code>x dan y <code>y adalah koordinat titik yang akan bertindak sebagai pusat untuk menulis teks. Parameter Gaya styles adalah objek yang boleh digunakan untuk menetapkan nilai -nilai set ciri -ciri yang besar. Anda juga boleh menentukan nilai sifat seperti isi

, stroke <p>, <code> opacity <code>family, putaran <code>size, skala <code>alignment, dan terjemahan <code>fill projek. Dalam tutorial ini, saya akan menunjukkan kepada anda bagaimana kita boleh menggunakan dua.js untuk menjadikan sepuluh elemen pertama jadual berkala dengan elektron berputar di sekitar nukleus. Nukleus juga akan mempunyai sedikit pergerakan untuk meningkatkan daya tarikan visual perwakilan kami. Ini akan digunakan kemudian untuk meletakkan atom kita di tengah. Arahan stroke ElementNames opacity mengandungi nama sepuluh elemen pertama jadual berkala. Indeks setiap nama sepadan dengan bilangan elektron dan proton elemen itu, dan ia bermula dengan rentetan kosong. Objek rotation gaya scale gaya translation
ini juga telah menentukan fungsi intrange () <h2> untuk mendapatkan nilai integer rawak dalam ekstrem yang diberikan. Kecerunan radial merah/hitam akan mewakili proton, dan kecerunan biru/hitam akan mewakili neutron. Kaedah <code> makeCircle () juga menetapkan jejari proton dan neutron ini kepada 10 piksel. Selepas itu, kami melangkah ke atas nucleusarray <p> dan isi setiap bulatan dengan kecerunan yang berbeza secara bergantian. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var rects = [];&lt;br&gt;&lt;br&gt;var elemWidth = document.querySelector(&quot;#draw-shapes&quot;).offsetWidth;&lt;br&gt;&lt;br&gt;for (i = 0; i &lt; 100; i++) {&lt;br&gt; rects[i] = two.makeRectangle(&lt;br&gt; Math.floor(Math.random() * elemWidth * 2),&lt;br&gt; Math.floor(Math.random() * 420 * 2),&lt;br&gt; 10 + Math.floor(Math.random() * 100),&lt;br&gt; 10 + Math.floor(Math.random() * 100)&lt;br&gt; );&lt;br&gt;}&lt;br&gt;&lt;br&gt;var group = two.makeGroup(...rects);&lt;br&gt;&lt;br&gt;group.noFill();&lt;br&gt;group.stroke = &quot;black&quot;;&lt;br&gt;group.linewidth = 6;&lt;br&gt;&lt;br&gt;two.update();&lt;br&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Menempatkan neutron dan proton di dalam nukleus adalah mudah. Walau bagaimanapun, meletakkan elektron dengan betul pada jarak seragam memerlukan sedikit matematik. Kami menggunakan pembolehubah <code>shellRadius untuk menentukan jarak kerang elektron yang berbeza dari nukleus. Seluruh bulatan meliputi sudut yang sama dengan 2 radian pi. Kita boleh meletakkan elektron yang berbeza secara seragam dengan mengedarkan radians 2 pi di antara mereka sama -sama. mempunyai kumpulan berasingan. Ia juga menetapkan warna mengisi untuk semua elektron dalam orbit tertentu sekaligus. Ia juga memberitahu Two.js untuk memutar elektron dan proton pada kelajuan tertentu. Untuk memuatkan elemen seterusnya, kami membuat satu lagi elektron dan satu lagi proton atau neutron kelihatan dan mengemas kini nama elemen. Selepas mengklik elemen terakhir, semua zarah tersembunyi sekali lagi supaya kita dapat memulakannya. Pembolehubah
menjejaki bilangan zarah atom yang kini dapat dilihat supaya kita dapat menunjukkan atau menyembunyikannya dengan sewajarnya. Dua.js perpustakaan dan bagaimana ia boleh digunakan untuk menarik bentuk seperti segi empat tepat, bulatan, dan elips. Selepas itu, kami membincangkan bagaimana kami dapat mengumpulkan objek yang berbeza untuk memanipulasi mereka sekaligus. Kami menggunakan keupayaan ini untuk mengumpulkan elemen untuk menterjemahkan dan memutarnya dalam penyegerakan. Alat -alat ini semua datang bersama -sama dalam animasi atom -atom dari sepuluh elemen pertama dalam jadual berkala.

Math.cos() Seperti yang anda lihat, mewujudkan grafik 2D animasi sangat mudah menggunakan two.js. Tumpuan jawatan ini adalah untuk membantu anda memulakan dengan cepat, jadi kami hanya meliputi asas -asas. Walau bagaimanapun, anda harus membaca dokumentasi rasmi untuk mengetahui lebih lanjut mengenai perpustakaan!

Atas ialah kandungan terperinci Panduan pemula ' s untuk melukis grafik 2D dengan dua.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!