HTML 5 Canvas Text Color Tutorial [Basic]
OK, seperti janji saya di postingan HTML 5 Canvas Text Font & Size Tutorial [Basic], kali ini saya ingin mengajak anda untuk mempelajari Pengaturan Warna dalam HTML 5 Canvas text ini. Nha untuk mengatur Pewarnaan Warna Teks di Kanvas HTML 5, saya akan memperkenalkan satu Properti baru kita, yaitu:
Hem, disini saya akan mendemokannya dengan mengganti warna Default Hitam kita sebelumnya dengan Warna Biru, pengennya sih Warna Hijau, cuma biasanya kan Warna tersering di Pake setelah Hitam Biru tuh, So Kita pake warna biru aja deh kali ini...
Silahkan KLIK DISINI untuk melihat Demonnya, 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: Silahkan Ganti Kata Annyonghaseyo dengan kata yang anda inginkan. Dan silahkan Ganti Warna teks dengan mengganti Kode Hexa-nya yang saya beri warna merah.
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
c.fillStyle
Hem, disini saya akan mendemokannya dengan mengganti warna Default Hitam kita sebelumnya dengan Warna Biru, pengennya sih Warna Hijau, cuma biasanya kan Warna tersering di Pake setelah Hitam Biru tuh, So Kita pake warna biru aja deh kali ini...
Silahkan KLIK DISINI untuk melihat Demonnya, 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 = 150;
var y = 100;
c.font="40pt Calibri";
c.fillStyle="#0000ff"; // text color
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: Silahkan Ganti Kata Annyonghaseyo dengan kata yang anda inginkan. Dan silahkan Ganti Warna teks dengan mengganti Kode Hexa-nya yang saya beri warna merah.
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