[ADS] Top Ads

HTML 5 Canvas Text Font & Size Tutorial [Basic]


Seperti janji saya dipostingan HTML 5 Canvas Text Tutorial [Basic] sebelumnya, kali ini saya akan menunjukkan cara mengatur ukuran Text dan Jenis Text(Font) pada Kanvas Text HTML 5. Nha untuk mengatur Jenis(Font) dan ukuran Teks kanvas HTML 5, kita harus menggunakan Properti baru, yaitu:

c.font


Dan Untuk Demonya Silahkan KLIK DISINI

Yang Udah gak sabar untuk Praktek, Silahkan Copy Paste Script Dibawah ini:

<?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.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: Berbeda dari HTML terdahulu, di HTML 5 anda hanya perlu memisahkan Perintah Font dan Size dengan spasi dan tidak harus mendeklarasikan 2 Properti berbeda dengan diapit Tanda Petik dua (") di masing-masing Properti.

Silahkan Ganti Kata Annyonghaseyo dengan kata yang anda inginkan, Dan untuk pengaturan Warna Silahkan Tunggu postingan selanjutnya.


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

Copyright © 2023

Cookies