Pada artikel pengenalan Canvas HTML5 sebelumnya, kita telah mempelajari cara menggambar objek dasar seperti titik, garis, kotak, lingkaran, dan segitiga. Show Objek digambar hanya sekali Bagaimana jika kita ingin menggambar banyak objek dan menggambarnya secara acak? Untuk menjawab pertanyaan ini, kita harus menggunakan perulangan dan fungsi 9Lebih jelasnya, mari kita bahas… Menggambar Objek dengan LoopsPada contoh di artikel sebelumnya, kita telah menggambar persegi dua kali _Dengan hasil seperti ini Lalu bagaimana jika kita ingin menggambar 10 kotak? Kita cukup mengetik ulang fungsi untuk menggambarnya dengan 0
Lalu jika Anda ingin gambar 1?Bisakah Anda mengetik kode sebanyak _2 baris?Pasti capek mengetik 1000 baris dengan nilai 3 dan 4 yang berbedaoleh karena itu, kita harus menggunakan pengulangan Contoh Kami akan menggambar 5 kotak dengan nilai 3 meningkat 6 di setiap iterasi dan 4 tersisa
Kami akan menggambar persegi berukuran 8 pada titik 9 dan 3 adalah variabelSetiap pengulangan nilai x akan bertambah 6
Jika kita nyatakan dalam persamaan garis lurus matematis
*mengingat pelajaran matematika (persamaan garis lurus, fungsi, dan aljabar linier) 😄 Hasil Sekarang cobalah menggambar sebanyak 2
Hasil Mengerti sekarang…? Lalu bagaimana jika nilai _4 sekarang berubahGampang, kita ubah saja menjadi seperti ini
Jadi hasilnya Masih ingin lebih? Mari kita coba untuk mengubah keduanya (nilai 3 dan 4 berubah)
Kami mengambil nilai 3 dan 4 dari variabel 8Hasil Gambar garis seperti di atas dapat dinyatakan dengan persamaan matematika
Menggunakan Iterasi BersarangPerulangan bersarang (nested loop) berarti perulangan di dalam perulangan Sekarang mari kita coba menggambar kuadrat 9 menuju _3 (horizontal) dan 9 menuju 4 (vertikal) dengan pengulangan bersarang
Jadi banyaknya kotak yang akan ditarik adalah 3 kotakSekarang bagaimana jika nilai _4 pada iterasi ke-2 kita tetapkan nilai awalnya adalah 3 0Hasil Selanjutnya saya akan tunjukan hasil kreasi saya yang bisa kalian ikuti dan silahkan pikirkan bagaimana gambarnya bisa terbentuk 😄 Kode _1* operator _6 berfungsi untuk menghitung sisa dariHasil Kode _2Hasil Itu saja...agar tutorial ini tidak terlalu panjang Silahkan terus berkreasi sendiri Menggambar Objek dengan Fungsi Matematika. acak()Fungsi _9 adalah fungsi yang menghasilkan nilai acak dari 8 sampai 9. Kita akan menggunakan fungsi ini untuk menentukan nilai 3 dan 4 agar objek yang kita gambar diletakkan secara acak di atas kanvasBerikut adalah contoh nilai yang dihasilkan oleh fungsi 9Karena fungsi _9 menghasilkan nilai 4, kita harus mengubahnya menjadi bilangan desimal (integer)Cara kita bisa menggunakan fungsi _5 untuk membulatkan nilaiMisalnya seperti ini _3Jadi nilai acak yang akan kita dapatkan adalah dari 6 sampai 7Sekarang mari kita coba menggambar titik pada kanvas dengan nilai acak 3 dan 4 dari 6 hingga panjang kanvas _4Hasil Besar. Sepertinya terlalu banyak poin Mari kita coba menggambar titik sebanyak 1 atau 2 5Hasil Selanjutnya kita memodifikasi kodenya Harap perbesar ukuran persegi menjadi _8 dan gambar dengan 4 kali. Kita gunakan dua kotak, yaitu _5 sebanyak 6 dan 7 sebanyak 6 _6Hasil Cobalah juga berkreasi dengan lingkaran _7Hasil Coba juga jari yang kita berikan secara acak, misalnya dari 7 sampai 0 _8Hasil Kata Akhir…Itulah cara menggambar objek dengan fungsi pengulangan dan acak. Fungsi acak terkadang digunakan dalam game untuk menggambar objek di posisi acak Misalnya pada game Flappy Bird, pipa penghalang ditempatkan secara acak dengan fungsi acak Pada kesempatan berikutnya mungkin kita akan membahas tentang warna dan animasi Terima kasih telah mengikuti tutorial ini. Jika Anda memiliki pertanyaan atau tambahan, beri tahu saya di komentar Apa gunanya metode matematika acak ()?B. Menggunakan Fungsi Matematika . acak ()
. Math, terdapat sebuah fungsi bernama random(), yang bisa kita digunakan untuk mengambil data dari list secara acak.
Apa itu lantai Matematika dalam javascript?Fungsi LANTAI . MATH membulatkan angka ke bawah ke bilangan bulat atau kelipatan terdekat dari signifikansi yang ditentukan, dengan bilangan bulat negatif dibulatkan mendekati atau menjauhi nol, tergantung pada mode. |