Teks dan Gambar pada Canvas
Render string teks dan gambar pada canvas.
Teks dan Gambar pada Canvas adalah pelajaran HTML 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 HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Menggambar Teks
Atur font: ctx.font = "bold 24px sans-serif". Gambar: ctx.fillText("Hello", x, y) atau ctx.strokeText("Hello", x, y). Koordinat y adalah garis dasar teks — tambahkan tinggi bagian atas huruf di atasnya untuk menempatkan teks dengan benar di dalam kotak pembatas.
Perataan Teks
ctx.textAlign mengontrol perataan horizontal: "left" (bawaan), "center", "right". ctx.textBaseline mengontrol perataan vertikal relatif terhadap y: "top", "middle", "alphabetic" (bawaan), "bottom". Untuk teks yang berada di tengah: atur keduanya menjadi "center" dan "middle".
measureText untuk Tata Letak
ctx.measureText("text") mengembalikan objek TextMetrics yang berisi lebar dan metrik jenis huruf. Gunakan untuk menghitung posisi teks secara dinamis — memusatkan teks dalam kotak, membungkus teks pada lebar maksimum, atau meratakan label ke kanan di samping titik data.
Pembungkusan Teks
Kanvas tidak memiliki pembungkusan teks bawaan. Implementasikan sendiri: ukur lebar kata, akumulasikan hingga melebihi maxWidth, lalu pindahkan ke baris baru pada interval lineHeight. Ini adalah fungsi utilitas yang umum dalam pustaka perenderan kanvas.
Menggambar Gambar
ctx.drawImage(image, dx, dy) menggambar elemen gambar HTML, elemen kanvas HTML, atau elemen video HTML pada (dx, dy). Muat gambar terlebih dahulu dan gambar di dalam penangan pemuatan gambar agar piksel tersedia sebelum penggambaran.
const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "photo.jpg";Menskalakan Gambar
ctx.drawImage(image, dx, dy, dw, dh) menskalakan gambar agar sesuai dengan dw x dh. Tidak ada pemertahanan rasio aspek secara otomatis — hitung dimensinya secara manual. Untuk mempertahankan rasio aspek: dw = img.width * scale; dh = img.height * scale.
Memotong Gambar
drawImage dengan sembilan argumen: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). Persegi panjang sumber (sx, sy, sw, sh) memotong bagian dari gambar; persegi panjang tujuan (dx, dy, dw, dh) menempatkan dan menskalakan potongan tersebut pada kanvas.
Penghalusan Gambar
ctx.imageSmoothingEnabled = false menonaktifkan interpolasi dwilinear saat menskalakan gambar. Gunakan untuk seni piksel yang memerlukan penskalaan tajam tanpa penghalusan. Biarkan tetap aktif (bawaan) untuk gambar foto, karena penskalaan yang halus terlihat lebih baik.
Kanvas sebagai Sumber Gambar
Berikan kanvas sebagai sumber kepada drawImage — merender satu kanvas ke kanvas lainnya. Hal ini memungkinkan perenderan di luar layar: gambar komposit kompleks pada kanvas tersembunyi, lalu gambar kanvas tersebut ke kanvas yang terlihat dalam satu operasi di setiap bingkai.
globalAlpha dan Penggabungan
ctx.globalAlpha (0 hingga 1) menerapkan transparansi seragam pada semua penggambaran berikutnya. ctx.globalCompositeOperation mengontrol cara penggambaran baru digabungkan dengan piksel yang sudah ada: "source-over" (bawaan), "multiply", "screen", "destination-out" (menghapus), dan lainnya.
toDataURL untuk Ekspor
canvas.toDataURL("image/png") mengekspor kanvas sebagai URL data PNG base64. Gunakan untuk unduhan yang dimulai pengguna: buat elemen jangkar, tetapkan href ke URL data dan atribut download ke nama berkas, lalu klik elemen tersebut secara terprogram.
Uji Pengetahuan
Apa pengaruh ctx.textBaseline = "middle" saat menggambar teks?
Ringkasan
Perenderan teks pada kanvas menggunakan ctx.font, fillText/strokeText, textAlign, dan textBaseline untuk penempatan, serta measureText untuk perhitungan tata letak. Penggambaran gambar melalui drawImage mendukung penskalaan dan pemotongan; globalAlpha dan globalCompositeOperation mengontrol penggabungan. toDataURL mengekspor kanvas untuk diunduh atau digunakan lebih lanjut.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Teks dan Gambar pada Canvas” gratis?
Ya — teks lengkap “Teks dan Gambar pada Canvas” 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 “Teks dan Gambar pada Canvas”?
Render string teks dan gambar pada canvas. 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 3 dari 4.
Berapa lama pelajaran “Teks dan Gambar pada Canvas” 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
- Menyiapkan Canvas dan Konteks 2D
- Menggambar Persegi Panjang dan Jalur
- Teks dan Gambar pada Canvas
- Animasi dengan requestAnimationFrame