HTML 5 Canvas Line Width Tutorial [Basic]
Ocre, postingan ini merupkan lanjutan postingan HTML 5 Canvas Line Tutorial [Basic], jadi disini kita hanya akan menambahkan properti baru, yaitu lineWidth. Apa kegunaan dari properti lineWidth ini? lineWidth digunakan untuk menentukan lebar line atau garis dalam Canvas HTML 5.
Bentuknya seperti gambar diatas, atau silahkan lihat Demo-nya DISINI
Nha, disini kita akan menambahkan:
Dan berikut Script-nya:
Untuk anda yang sudah mengikuti Panduan sebelumnya anda hanya perlu menambahkan Properti lineWidth saja. Jika sudah Save template dan lihat hasilnya.
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
Bentuknya seperti gambar diatas, atau silahkan lihat Demo-nya DISINI
Nha, disini kita akan menambahkan:
c.lineWidth
Dan berikut Script-nya:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>
function drawLine() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
c.moveTo(100,150);
c.lineTo(450,50);
c.lineWidth=15;
c.stroke();
}
</script>
</head>
<body onload="drawLine()">
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
Untuk anda yang sudah mengikuti Panduan sebelumnya anda hanya perlu menambahkan Properti lineWidth saja. Jika sudah Save template dan lihat hasilnya.
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
Kalu dilihat dari kode diatas berarti kita harus membuat full template agar outputbisa dilihat, pertannyaan yang saya ingin ajukan adalah bagaimana caranya agar kita bisa mempraktekan itu hanya dalam editor postingan, tanpa harus membuat keseluruhan template?
BalasHapusWah Semalem Bang Hendro Berkunjung Rupanya wkwkw.... Yupz bener bang, Untuk Ngikutin tutor ini dan yg sebelum atau sesudahnya emank saya arahin ke Full Template soalnya intinya emank pengen share isi buku Introducing HTML 5-nya si Bruce N Remy doank... dan kebetulan 2 Bapak2 HTML5 itu ngasih pengajaran versi Full template karena mereka emank nunjukkinnya khusus untuk Platform WP...
BalasHapusKlo Untuk dibikinnya langsung di postingan si canvas kita taruh diawal, baru Onload untuk drawline() pindah jadi pengawal javascript untuk inisialisasi.. Cuma ane kurang tau nie si penutup Canvas ditaruh diakhir setelah penutup Js apa sama2 langsung didepan(sebelum Onload dan js)...