Pada artikel pengenalan Canvas HTML5 sebelumnya, kita telah mempelajari cara menggambar objek dasar seperti titik, garis, kotak, lingkaran, dan segitiga.
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 ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);9
Lebih jelasnya, mari kita bahas…
Menggambar Objek dengan Loops
Pada contoh di artikel sebelumnya, kita telah menggambar persegi dua kali
<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeRect(10,10,100,100); ctx.fillRect(120,10,100,100); </script>_
Dengan hasil seperti ini
Lalu bagaimana jika kita ingin menggambar 10 kotak?
Kita cukup mengetik ulang fungsi untuk menggambarnya dengan <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>0
ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);
Lalu jika Anda ingin gambar <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>1?
Bisakah Anda mengetik kode sebanyak <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>_2 baris?
Pasti capek mengetik 1000 baris dengan nilai <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>3 dan <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>4 yang berbeda
oleh karena itu, kita harus menggunakan pengulangan
Contoh
Kami akan menggambar 5 kotak dengan nilai <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>3 meningkat <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>6 di setiap iterasi dan <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>4 tersisa
<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>
Kami akan menggambar persegi berukuran <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>8 pada titik <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>9 dan <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>3 adalah variabel
Setiap pengulangan nilai x akan bertambah <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>6
perulangan ke 1, nilai x = 10 dan y = 10 perulangan ke 2, nilai x = 20 dan y = 10 perulangan ke 3, nilai x = 30 dan y = 10 perulangan ke 4, nilai x = 40 dan y = 10 perulangan ke 5, nilai x = 50 dan y = 10
Jika kita nyatakan dalam persamaan garis lurus matematis
y = 10 (nilai y tetap 10)
*mengingat pelajaran matematika (persamaan garis lurus, fungsi, dan aljabar linier) 😄
Hasil
Sekarang cobalah menggambar sebanyak perulangan ke 1, nilai x = 10 dan y = 10 perulangan ke 2, nilai x = 20 dan y = 10 perulangan ke 3, nilai x = 30 dan y = 10 perulangan ke 4, nilai x = 40 dan y = 10 perulangan ke 5, nilai x = 50 dan y = 102
<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 500; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>
Hasil
Mengerti sekarang…?
Lalu bagaimana jika nilai <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>_4 sekarang berubah
Gampang, kita ubah saja menjadi seperti ini
<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(y = 10; y <= 500; y+=10){ ctx.strokeRect(10, y, 10, 10); } </script>
Jadi hasilnya
Masih ingin lebih?
Mari kita coba untuk mengubah keduanya (nilai <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>3 dan <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>4 berubah)
<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(i = 10; i <= 500; i+=10){ ctx.strokeRect(i, i, 10, 10); } </script>
Kami mengambil nilai <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>3 dan <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>4 dari variabel perulangan ke 1, nilai x = 10 dan y = 10 perulangan ke 2, nilai x = 20 dan y = 10 perulangan ke 3, nilai x = 30 dan y = 10 perulangan ke 4, nilai x = 40 dan y = 10 perulangan ke 5, nilai x = 50 dan y = 108
Hasil
Gambar garis seperti di atas dapat dinyatakan dengan persamaan matematika
y = x
Menggunakan Iterasi Bersarang
Perulangan bersarang (nested loop) berarti perulangan di dalam perulangan
Sekarang mari kita coba menggambar kuadrat perulangan ke 1, nilai x = 10 dan y = 10 perulangan ke 2, nilai x = 20 dan y = 10 perulangan ke 3, nilai x = 30 dan y = 10 perulangan ke 4, nilai x = 40 dan y = 10 perulangan ke 5, nilai x = 50 dan y = 109 menuju <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>_3 (horizontal) dan perulangan ke 1, nilai x = 10 dan y = 10 perulangan ke 2, nilai x = 20 dan y = 10 perulangan ke 3, nilai x = 30 dan y = 10 perulangan ke 4, nilai x = 40 dan y = 10 perulangan ke 5, nilai x = 50 dan y = 109 menuju <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>4 (vertikal) dengan pengulangan bersarang
<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 400; x+=10){ for(y = 10; y <= 400; y+=10){ ctx.strokeRect(x, y, 10, 10); } } </script>
Jadi banyaknya kotak yang akan ditarik adalah y = 10 (nilai y tetap 10)3 kotak
Sekarang bagaimana jika nilai <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>_4 pada iterasi ke-2 kita tetapkan nilai awalnya adalah <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>3
ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);0
Hasil
Selanjutnya saya akan tunjukan hasil kreasi saya yang bisa kalian ikuti dan silahkan pikirkan bagaimana gambarnya bisa terbentuk 😄
Kode
ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);_1
* operator y = 10 (nilai y tetap 10)_6 berfungsi untuk menghitung sisa dari
Hasil
Kode
ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);_2
Hasil
Itu saja...agar tutorial ini tidak terlalu panjang
Silahkan terus berkreasi sendiri
Menggambar Objek dengan Fungsi Matematika. acak()
Fungsi ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);_9 adalah fungsi yang menghasilkan nilai acak dari y = 10 (nilai y tetap 10)8 sampai y = 10 (nilai y tetap 10)9. Kita akan menggunakan fungsi ini untuk menentukan nilai <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>3 dan <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>4 agar objek yang kita gambar diletakkan secara acak di atas kanvas
Berikut adalah contoh nilai yang dihasilkan oleh fungsi ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);9
Karena fungsi ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);_9 menghasilkan nilai <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 500; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>4, kita harus mengubahnya menjadi bilangan desimal (integer)
Cara kita bisa menggunakan fungsi <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 500; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>_5 untuk membulatkan nilai
Misalnya seperti ini
ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);_3
Jadi nilai acak yang akan kita dapatkan adalah dari <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 500; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>6 sampai <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 500; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>7
Sekarang mari kita coba menggambar titik pada kanvas dengan nilai acak <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>3 dan <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>4 dari <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 500; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>6 hingga panjang kanvas
ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);_4
Hasil
Besar. Sepertinya terlalu banyak poin
Mari kita coba menggambar titik sebanyak <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(y = 10; y <= 500; y+=10){ ctx.strokeRect(10, y, 10, 10); } </script>1 atau <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(y = 10; y <= 500; y+=10){ ctx.strokeRect(10, y, 10, 10); } </script>2
ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);5
Hasil
Selanjutnya kita memodifikasi kodenya
Harap perbesar ukuran persegi menjadi <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 50; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>_8 dan gambar dengan <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(y = 10; y <= 500; y+=10){ ctx.strokeRect(10, y, 10, 10); } </script>4 kali. Kita gunakan dua kotak, yaitu <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(y = 10; y <= 500; y+=10){ ctx.strokeRect(10, y, 10, 10); } </script>_5 sebanyak <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(y = 10; y <= 500; y+=10){ ctx.strokeRect(10, y, 10, 10); } </script>6 dan <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(y = 10; y <= 500; y+=10){ ctx.strokeRect(10, y, 10, 10); } </script>7 sebanyak <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(y = 10; y <= 500; y+=10){ ctx.strokeRect(10, y, 10, 10); } </script>6
ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);_6
Hasil
Cobalah juga berkreasi dengan lingkaran
ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);_7
Hasil
Coba juga jari yang kita berikan secara acak, misalnya dari <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(x = 10; x <= 500; x+=10){ ctx.strokeRect(x, 10, 10, 10); } </script>7 sampai <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); for(i = 10; i <= 500; i+=10){ ctx.strokeRect(i, i, 10, 10); } </script>0
ctx.strokeRect(10,10,100,100); ctx.strokeRect(110,10,100,100); ctx.strokeRect(210,10,100,100); ctx.strokeRect(310,10,100,100); ctx.strokeRect(410,10,100,100); ctx.strokeRect(510,10,100,100); ctx.strokeRect(610,10,100,100); ctx.strokeRect(710,10,100,100); ctx.strokeRect(810,10,100,100); ctx.strokeRect(910,10,100,100);_8
Hasil
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