HTML Academy · Pelajaran

Menggambar Persegi Panjang dan Jalur

Gunakan fillRect, strokeRect, dan perintah jalur untuk menggambar bentuk.

Menggambar Persegi Panjang dan Jalur adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Penyiapan Kanvas

Elemen <canvas> memerlukan atribut width dan height yang ditentukan secara eksplisit untuk menetapkan dimensi piksel. Dapatkan konteks 2D: const ctx = canvas.getContext("2d"). Semua operasi penggambaran menggunakan objek konteks ini.

<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");

fillRect dan strokeRect

Gambarlah persegi panjang tanpa jalur: ctx.fillRect(x, y, width, height) mengisi persegi panjang solid. ctx.strokeRect(x, y, width, height) menggambar garis tepinya. Atur ctx.fillStyle dan ctx.strokeStyle sebelum menggambar.

ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);

clearRect untuk Menghapus

ctx.clearRect(x, y, width, height) menghapus piksel menjadi transparan. Gunakan untuk menghapus area sebelum menggambar ulang — hal ini penting untuk animasi: hapus kanvas, lalu gambar ulang semuanya pada posisi baru di setiap bingkai.

Dasar-Dasar Jalur

Jalur menentukan bentuk. Mulai: ctx.beginPath(). Pindah ke titik awal: ctx.moveTo(x, y). Gambar garis: ctx.lineTo(x, y). Tutup: ctx.closePath(). Tampilkan: ctx.fill() atau ctx.stroke().

Menggambar Garis

Sebuah segitiga: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → gambar garis. closePath secara otomatis menggambar segmen terakhir kembali ke titik awal — Anda tidak perlu mengulangi koordinat pertama.

Busur dan Lingkaran

ctx.arc(cx, cy, radius, startAngle, endAngle). Lingkaran penuh: ctx.arc(100, 100, 50, 0, Math.PI * 2). Sudut dinyatakan dalam radian. 0 adalah arah kanan (posisi pukul 3); Math.PI adalah arah kiri (pukul 9).

Kurva Bezier

ctx.quadraticCurveTo(cpx, cpy, x, y) menggambar Bezier kuadratik dengan satu titik kontrol. ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) menggambar Bezier kubik dengan dua titik kontrol untuk menghasilkan kurva yang halus.

Gaya Isian

fillStyle menerima string warna, gradien linear (ctx.createLinearGradient()), gradien radial (ctx.createRadialGradient()), dan pola (ctx.createPattern(image, repeat)). Terapkan isian kompleks selain warna solid untuk menghasilkan efek visual yang kaya.

Gaya Garis

Kontrol tampilan garis: ctx.lineWidth (lebar dalam piksel), ctx.lineCap ("butt", "round", "square"), ctx.lineJoin ("miter", "round", "bevel"), dan ctx.setLineDash([5, 3]) untuk garis putus-putus dengan panjang yang berselang-seling.

Simpan dan Pulihkan

ctx.save() menempatkan status saat ini (fillStyle, strokeStyle, lineWidth, transform, clip) ke dalam tumpukan. ctx.restore() mengeluarkannya dari tumpukan. Bungkus operasi penggambaran kompleks dengan save/restore agar gaya tidak memengaruhi operasi penggambaran lain yang tidak terkait.

Sistem Koordinat

Titik asal kanvas (0,0) berada di sudut kiri atas. X bertambah ke arah kanan; Y bertambah ke arah bawah. Transformasi (memindahkan, memutar, menskalakan) mengubah sistem koordinat, sehingga Anda dapat menggambar relatif terhadap titik asal lokal tanpa menghitung posisi absolut secara manual.

Uji Pengetahuan

Apa yang dilakukan ctx.beginPath() sebelum menggambar jalur?

Ringkasan

Penggambaran 2D pada kanvas menggunakan metode konteks untuk persegi panjang (fillRect, strokeRect), jalur (beginPath, moveTo, lineTo, arc, bezierCurveTo), gaya (fillStyle, strokeStyle, lineWidth), dan pengelolaan status (save/restore). Menguasai primitif ini memungkinkan Anda membangun grafik kompleks dari blok pembangun sederhana.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggambar Persegi Panjang dan Jalur” gratis?

Ya — teks lengkap “Menggambar Persegi Panjang dan Jalur” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menggambar Persegi Panjang dan Jalur”?

Gunakan fillRect, strokeRect, dan perintah jalur untuk menggambar bentuk. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Menggambar Persegi Panjang dan Jalur” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy