JavaScript Academy · Pelajaran

Bekerja dengan Gambar dan Teks

Gambar gambar dan teks bergaya pada canvas.

Bekerja dengan Gambar dan Teks adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Memuat Gambar

Canvas menggambar dari HTMLImageElement. Buat sebuah Image, tetapkan src-nya, lalu tunggu onload sebelum menggambar—piksel belum tersedia sampai saat itu.

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";

Dasar-Dasar drawImage

drawImage(img, dx, dy) menggambar gambar pada posisi yang ditentukan dengan ukuran alaminya.

img.onload = () => {
  ctx.drawImage(img, 20, 20);
};

Mengubah Skala Gambar

Bentuk lima argumen drawImage(img, dx, dy, dWidth, dHeight) mengubah skala gambar agar sesuai dengan kotak tujuan.

ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90

Memotong dengan Persegi Panjang Sumber

Bentuk sembilan argumen memungkinkan Anda memotong gambar: drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). Empat argumen pertama menjelaskan bagian yang diambil dari sumber.

ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100

Menggambar Teks Berisi

fillText(text, x, y) melukis teks menggunakan fillStyle. Secara bawaan, nilai y adalah garis dasar teks.

ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);

Teks Bergaris Luar

strokeText(text, x, y) hanya menggambar garis luar menggunakan strokeStyle dan lineWidth.

ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);

Properti Jenis Huruf

font mengikuti notasi singkat CSS: [style] [weight] size family. Ukuran dan jenis huruf wajib dicantumkan.

ctx.font = "italic bold 28px Georgia, serif";

Perataan Teks

textAlign (start/end/left/right/center) menetapkan penjangkaran horizontal, sedangkan textBaseline (top/middle/alphabetic/bottom) menetapkan penjangkaran vertikal di sekitar titik yang diberikan.

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);

Mengukur Teks

measureText(text) mengembalikan objek TextMetrics. Properti width-nya memberi tahu lebar teks saat digambar—hal yang penting untuk tata letak dan pembungkusan.

const m = ctx.measureText("How wide?");
console.log(m.width); // pixels

Pembungkusan Kata Sederhana

Gabungkan measureText dengan perulangan untuk membungkus string panjang ke dalam beberapa baris.

function wrap(ctx, text, x, y, maxW, lh) {
  let line = "";
  for (const word of text.split(" ")) {
    const test = line + word + " ";
    if (ctx.measureText(test).width > maxW && line) {
      ctx.fillText(line, x, y);
      line = word + " ";
      y += lh;
    } else {
      line = test;
    }
  }
  ctx.fillText(line, x, y);
}

Bayangan untuk Kedalaman

Properti bayangan berlaku untuk bentuk, gambar, dan teks: shadowColor, shadowBlur, shadowOffsetX/Y.

ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);

Uji Cepat

Uji pemahaman Anda tentang menggambar gambar dan teks.

Ringkasan: Gambar dan Teks

Anda telah mempelajari cara memuat gambar dan menggambarnya dengan penskalaan serta pemotongan melalui drawImage, menampilkan teks dengan fillText/strokeText, menetapkan font, meratakan teks, mengukur lebar dengan measureText, dan menambahkan bayangan. Selanjutnya: animasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Bekerja dengan Gambar dan Teks” gratis?

Ya — teks lengkap “Bekerja dengan Gambar dan Teks” 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 “Bekerja dengan Gambar dan Teks”?

Gambar gambar dan teks bergaya pada canvas. 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 3 dari 4.

Berapa lama pelajaran “Bekerja dengan Gambar dan Teks” 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