HTML 5 Canvas Text Stroke Tutorial [Basic]
Malem semua, Setelah sebelumnya membahas tentang HTML 5 Canvas Text Color Tutorial [Basic], malam ini saya akan mengajak anda untuk membahas kelanjutan dari HTML Canvas Text, yaitu, HTML5 Canvas Text Stroke. Dari namanya aja pasti anda udah bisa sedikit menerawang (Udah kaya Dukun aja) apa yang akan kita bahas kali ini hhe... Yupz, klo diartikan ngawur versi saya sih seharusnya jadi Warna Coretan pada Kanvas HTML 5 hhe..
Tapi sepertinya bukan itu maksud dari nama HTML5 Canvas Text Stroke ini, soalnya dari awal mempelajarinya pun saya gak pernah nemuin Efek Coretan di Kanvas Percobaan hhe... Dan setelah saya pisahin antara Script Text Color dan stroke Color, akhirnya saya tau maksud dari Stroke di Kanvas HTML 5 ini hhe... Coba perhatikan Demo dari postingan ini baik-baik, disini saya sengaja membedakan Teks di Fill text dengan Teks di Stroke text. Bukan untuk membuat anda bingung, namun untuk membuat anda memahami maksud dari postingan kali ini. di Fill Text saya menuliskan Kata Hello World! *kata Wajib klo bikin Blog Wordpress pertama kali hhe... Dan di Stroke Text saya menuliskan Annyonghaseyo.
Coba perhatikan, Kedua Text berbeda yang saya tulis akhirnya justru menjadi terpisah dan seperti membentuk Shadow Text. Dan disini tentu saja kata-kata di fill text tampak menjadi seperti bayangannya. Nha dari Demo ini dapat saya simpulkan bahwa yang dimaksud Stroke disini adalah Warna untuk Border/Garis Text. Bukan Coretan seperti yang kita bayangkan sebelumnya. Lantas apa jadinya jika kata-kata di kedua Script itu saya samakan, misal menjadi Hello World! dua-duanya atau menjadi Annyonghaseyo dua-duanya?
Mari kita coba, Dan berikut hasilnya jik kata-kata dikedua teks kita samakan:
Ternyata, Jika kedua text kita samakan, kata-kata didalam fill text akan menjadi warna untuk isi Tulisan. itu kenapa di Link Demo saya sengaja membuatnya berbeda agar anda memahami Tutorial ini dengan benar.
Catatan: Untuk mengikuti tutorial ini, saya sarankan anda mengisi kedua element teks baik fill text maupun stroke text agar anda dapat memahami dan melihat perbedaannya, selain itu ada baiknya anda mengisi kata-kata dalam fill text terlebih dahulu agar anda dapat mengukur ketebalan warna stroke yang akan dibuat.
Dan Berikut Method yang kita gunakan kali ini:
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.
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
Tapi sepertinya bukan itu maksud dari nama HTML5 Canvas Text Stroke ini, soalnya dari awal mempelajarinya pun saya gak pernah nemuin Efek Coretan di Kanvas Percobaan hhe... Dan setelah saya pisahin antara Script Text Color dan stroke Color, akhirnya saya tau maksud dari Stroke di Kanvas HTML 5 ini hhe... Coba perhatikan Demo dari postingan ini baik-baik, disini saya sengaja membedakan Teks di Fill text dengan Teks di Stroke text. Bukan untuk membuat anda bingung, namun untuk membuat anda memahami maksud dari postingan kali ini. di Fill Text saya menuliskan Kata Hello World! *kata Wajib klo bikin Blog Wordpress pertama kali hhe... Dan di Stroke Text saya menuliskan Annyonghaseyo.
Coba perhatikan, Kedua Text berbeda yang saya tulis akhirnya justru menjadi terpisah dan seperti membentuk Shadow Text. Dan disini tentu saja kata-kata di fill text tampak menjadi seperti bayangannya. Nha dari Demo ini dapat saya simpulkan bahwa yang dimaksud Stroke disini adalah Warna untuk Border/Garis Text. Bukan Coretan seperti yang kita bayangkan sebelumnya. Lantas apa jadinya jika kata-kata di kedua Script itu saya samakan, misal menjadi Hello World! dua-duanya atau menjadi Annyonghaseyo dua-duanya?
Mari kita coba, Dan berikut hasilnya jik kata-kata dikedua teks kita samakan:
Ternyata, Jika kedua text kita samakan, kata-kata didalam fill text akan menjadi warna untuk isi Tulisan. itu kenapa di Link Demo saya sengaja membuatnya berbeda agar anda memahami Tutorial ini dengan benar.
Catatan: Untuk mengikuti tutorial ini, saya sarankan anda mengisi kedua element teks baik fill text maupun stroke text agar anda dapat memahami dan melihat perbedaannya, selain itu ada baiknya anda mengisi kata-kata dalam fill text terlebih dahulu agar anda dapat mengukur ketebalan warna stroke yang akan dibuat.
Dan Berikut Method yang kita gunakan kali ini:
c.strokeStyle
c.strokeText("Hello World!", x, y);
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 = 80;
var y = 110;
c.font="60pt Calibri";
c.fillStyle="#C4F2FF"; // fill color
c.fillText("Hello World!", x, y);
c.lineWidth=3;
c.strokeStyle="#00A2D0"; // stroke color
c.strokeText("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.
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