HTML 5 Canvas Text Tutorial [Basic]
Ocre, setelah sebelumnya kita membahas Canvas Image, kini saya akan mengajak anda untuk mempelajari Canvas Text. Dan di postingan kali ini, saya akan membahas tentang dasar membuat Text di Kanvas HTML 5. Dan bisa dibilang pembahasan tentang HTML 5 Canvas text ini juga merupakan pembahasan terakhir kita untuk tingkat Basic.
Untuk membuat Teks dengan memanfaatkan Kanvas HTML 5, kita akan menggunakan satu Method baru yang akan saya perkenalkan kepada anda semua, yaitu Method fillText(). Teks sendiri didefinisikan dengan sebuah nilai String dan sebuah posisi.
Susunan Method kita kali ini adalah:
c.fillText("Life is good if you create a beautiful (My Dad)", x, y);
Dan Untuk Melihat Demonya, Silahkan KLIK DISINI
Dan Ini dia Script yang dapat anda gunakan:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>
function drawText() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
var x = 250;
var y = 200;
c.fillText("Life is good if you create a beautiful (My Dad)", x, y);
}
</script>
</head>
<body onload="drawText()">
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.
Ps: Karena Untuk postingan kali ini Nilai saya biarkan Default, Jadi Text yang tampil memang sangat kecil dan untuk mengubah ukurannya Silahkan tunggu postingan selanjutnya...
Keterangan: Ganti Kata Life is good if you create a beautiful (My Dad) dengan kata yang anda suka...
Sumber: Buku Introducing HTML 5 Karangan Bruce Lawson and Remy Sharp, Untuk lebih jelasnya anda dapat bertanya langsung kepada mereka Via Twitter di @brucel & @rem
Posting Komentar
Posting Komentar