JavaScript Academy · Pelajaran

Menggambar Bentuk dan Jalur

Render persegi panjang, busur, dan jalur khusus.

Menggambar Bentuk dan Jalur adalah pelajaran JavaScript 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Persegi Panjang Terlebih Dahulu

Persegi panjang memiliki pintasan khusus: fillRect, strokeRect, dan clearRect. Masing-masing menerima (x, y, width, height).

ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);

Memulai Jalur

Untuk bentuk selain persegi panjang, Anda perlu membuat jalur. Panggil beginPath() untuk memulai dari awal, tambahkan segmen, lalu panggil stroke() atau fill().

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();

moveTo dan lineTo

moveTo(x, y) mengangkat pena dan memindahkannya tanpa menggambar. lineTo(x, y) menggambar garis lurus dari titik saat ini ke titik baru.

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();

Menutup Jalur

closePath() menggambar garis kembali ke titik awal untuk menyelesaikan garis luar. Ini berguna untuk poligon.

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();

Mengisi Bentuk

fill() melukis bagian dalam jalur saat ini dengan fillStyle. Anda dapat mengisi dan menggambar garis luar pada jalur yang sama.

ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();

Menggambar Lingkaran dengan arc

arc(x, y, radius, startAngle, endAngle) menggambar busur lingkaran. Sudut dinyatakan dalam radian. Lingkaran penuh membentang dari 0 hingga 2 * Math.PI.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();

Busur Sebagian dan Irisan Pai

Gunakan sudut awal dan akhir untuk menggambar irisan. Gabungkan dengan lineTo menuju titik tengah untuk membuat irisan pai.

ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();

Kurva Kuadratik dan Bézier

quadraticCurveTo(cpx, cpy, x, y) dan bezierCurveTo(...) menggambar kurva halus menggunakan titik kendali.

ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();

Gaya Garis

Atur tampilan garis dengan lineWidth, lineCap (butt/round/square), lineJoin (miter/round/bevel), dan setLineDash.

ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();

Aturan Pengisian

fill() menerima "nonzero" (bawaan) atau "evenodd" untuk menentukan cara mengisi subjalur yang saling tumpang tindih—berguna untuk bentuk berlubang.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donut

Gradien sebagai Isian

Buat gradien dengan createLinearGradient, tambahkan perhentian warna, lalu tetapkan gradien tersebut ke fillStyle.

const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);

Uji Cepat

Uji pemahaman Anda tentang jalur.

Ringkasan: Bentuk dan Jalur

Sekarang Anda dapat menggambar persegi panjang, membuat jalur dengan beginPath/moveTo/lineTo/closePath, menggambar lingkaran dengan arc, menambahkan kurva, mengatur gaya garis, serta mengisi dengan warna atau gradien. Selanjutnya: gambar dan teks.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggambar Bentuk dan Jalur” gratis?

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

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

Render persegi panjang, busur, dan jalur khusus. Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 Bentuk 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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 JavaScript Academy