Beranda Blogger Tutorial HTML 5

HTML 5 Canvas Line Width Tutorial [Basic]

2 • menit membaca
Daftar Isi

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:

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



2 komentar

Comment Author Avatar
Amdhas
15 Januari 2011 pukul 21.38 Hapus
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?
Balas
Comment Author Avatar
Blogger Serabutan
16 Januari 2011 pukul 07.43 Hapus
Wah 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...

Klo 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)...
Balas