HTML Canvas Text dan Image

Pelajari Tutorial Canvas HTML Lainya Disini 01. HTML5 Canvas 02. HTML Canvas Menggambar 03. HTML Canvas Koordinat 04. HTML Canvas Gradien 05. Html Canvas Text dan Image

Menggambar teks pada kanvas

Untuk menggambar teks pada kanvas, properti yang paling penting dan metode adalah:

• Font - mendefinisikan sifat font untuk teks
• fillText (teks, x, y) - menarik "isi" teks pada kanvas
• strokeText (teks, x, y) - menarik teks pada kanvas (tidak ada isi)

Contoh

Mengatur font untuk 30px "Arial" dan menulis teks penuh pada kanvas:

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.font = "30px Arial";

ctx.fillText ("Hello World", 20,60);

Menggunakan strokeText ()

Contoh

Mengatur font untuk 30px "Arial" dan menulis teks, tanpa mengisi, di kanvas:

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText ("Hello World", 20,60);

Tambahkan warna dan Pusat Teks

Contoh

Mengatur font untuk 30px "Comic Sans MS" dan menulis teks merah diisi di tengah kanvas:

var canvas = document.getElementById("myCanvas");

var 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);

Canvas - Gambar

Untuk menggambar sebuah gambar pada kanvas, menggunakan metode berikut:

• drawImage (gambar, x, y)

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var img = document.getElementById("scream");

ctx.drawImage(img, 10, 10);

Kembali Keatas ⇑

CB Blogger