Teks Canvas HTML

Menyambungkan teks di atas layar

Aturan dan metode paling penting untuk menggambar teks di atas layar adalah:

• font - Tentukan sifat font teks
• fillText(text,x,y) - Menyambungkan "teks diisi" di atas layar
• strokeText(text,x,y) - Menyambungkan teks di atas layar (tanpa pencahayaan)

Gunakan fillText()

Contoh

Tetapkan font "30px Arial", dan tulis teks di atas layar (dengan pencahayaan):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Coba Sendiri

Gunakan strokeText()

Contoh

Tetapkan font "30px Arial", dan tulis teks di atas layar (tanpa pencahayaan):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Coba Sendiri

Tambah warna dan cetak teks di tengah

Contoh

Tetapkan font "30px Comic Sans MS", dan tulis teks berwarna merah di tengah layar:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

Coba Sendiri

Lihat Juga:

Panduan Rujukan Lengkap Canvas CodeW3C.com