HTML 5 Canvas Text Align Tutorial [Basic]
Dan dipostingan kali ini, akhirnya kita tiba pada postingan dan pembahasan terakhir dari HTML 5 Tutorial Basic. Dan InsyaAllah untuk kedepannya saya akan membahas dan mengenalkan Materi Advanced kepada anda semua *tunggu aja hhe...
Setelah sebelumnya kita mempelajari HTML 5 Canvas Text Stroke Tutorial [Basic], dipostingan terakhir dari pembahasan HTML 5 Canvas text ini kita akan membahas tentang textAlign atau perataan teks. Agak rancu kan klo saya udah ngajarin tentang Ukuran dan Font, warna, bahkan Stroke dari kanvas teks tapi gak ngajarin Align hhe... untuk itu pembahasan ini saya tempatkan di postingan terakhir untuk HTML 5 Basic.
Nha, untuk membuat perataan teks di Kanvas HTML 5, saya akan memperkenalkan satu Properti baru kepada anda semua, yaitu:
Dalam materi ini, kita bisa melakukan perataan kiri, kanan dan tengah *Untuk Justify gak penting soalnya pasti ngikutin rata Kiri hhe... Perataan di dalam Kanvas HTML 5 bersifat Relatif untuk sebuah Garis Vertikal Imajiner pada posisi X pada teks yang akan diatur oleh fillText() atau strokeText(). Kecuali dinyatakan lain, secara Default perataannya akan sama seperti jika anda menggunakan Office, yaitu rata kiri.
Untuk Demonya, Silahkan KLIK DISINI
Dan berikut Script yang dapat anda Gunakan:
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.
Keterangan: Di dalam Demo kali ini saya menggunakan Default dari textAlign yaitu rata kiri atau left, jika anda ingin menoba rata lainnya anda dapat menggunakan right untuk rata kanan dan Center untuk rata tengah. Dan Seperti biasa, silahkan ganti kata Annyonghaseyo dengan kata yang anda inginkan.
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
Setelah sebelumnya kita mempelajari HTML 5 Canvas Text Stroke Tutorial [Basic], dipostingan terakhir dari pembahasan HTML 5 Canvas text ini kita akan membahas tentang textAlign atau perataan teks. Agak rancu kan klo saya udah ngajarin tentang Ukuran dan Font, warna, bahkan Stroke dari kanvas teks tapi gak ngajarin Align hhe... untuk itu pembahasan ini saya tempatkan di postingan terakhir untuk HTML 5 Basic.
Nha, untuk membuat perataan teks di Kanvas HTML 5, saya akan memperkenalkan satu Properti baru kepada anda semua, yaitu:
c.textAlign
Dalam materi ini, kita bisa melakukan perataan kiri, kanan dan tengah *Untuk Justify gak penting soalnya pasti ngikutin rata Kiri hhe... Perataan di dalam Kanvas HTML 5 bersifat Relatif untuk sebuah Garis Vertikal Imajiner pada posisi X pada teks yang akan diatur oleh fillText() atau strokeText(). Kecuali dinyatakan lain, secara Default perataannya akan sama seperti jika anda menggunakan Office, yaitu rata kiri.
Untuk Demonya, Silahkan KLIK DISINI
Dan berikut 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 = 288;
var y = 110;
c.font="30pt Calibri";
c.textAlign="left";
c.fillStyle="blue";
c.fillText("Annyonghaseyo", 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.
Keterangan: Di dalam Demo kali ini saya menggunakan Default dari textAlign yaitu rata kiri atau left, jika anda ingin menoba rata lainnya anda dapat menggunakan right untuk rata kanan dan Center untuk rata tengah. Dan Seperti biasa, silahkan ganti kata Annyonghaseyo dengan kata yang anda inginkan.
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