HTML 5 Canvas Line Tutorial [Basic]
Setelah sebelumnya kita sudah mengetahui dasar pengimplementasian Element Canvas dalam HTML 5, kini kita akan masuk ke Pembahasan selanjutnya dari Buku Introducing HTML 5 Karangan Bruce Lawson and Remy Sharp, yaitu pembahasan tentang HTML 5 Canvas Line.
Bagaimana Bentuknya? bentuknya seperti gambar diatas atau silahkan lihat DEMO-nya DISINI
Nha, untuk membuat Line atau garis pada Canvas HTML5 kita dapat menggunakan Methods moveTo(), lineTo(), Dan stroke(). Implementasinya seperti di bawah ini:
Lantas Bagaimana Menerapkannya ke dalam template? Untuk menerapkannya, Silahkan Masukkan Script dibawah ini kedalam Template Blog Percobaan anda sebelumnya. Klik Rancangan > Edit HTML Kemudian Centang Expand Template Widget, sampai disini terserah anda mau menambahkan atau mengganti keseluruhan Script sebelumnya.
Dan berikut Scriptnya:
Jika Sudah, Save Template anda Dan Lihat hasilnya. Jika anda mengikuti Panduannya dengan benar maka anda akan mendapati sebuah garis seperti gambar diatas. Dan Untuk anda yang menggunakan Platform lain silahkan buang bagian skin.
Keterangan:
1. Methods moveTo() membuat sebuah subpatch baru untuk jalur yang diberikan. Titik ini menjadi konteks baru. Bisa dikatakan Methods moveTo() merupakan sebuah cara untuk mengatur posisi kursor gambar anda.Bagaimana Bentuknya? bentuknya seperti gambar diatas atau silahkan lihat DEMO-nya DISINI
Nha, untuk membuat Line atau garis pada Canvas HTML5 kita dapat menggunakan Methods moveTo(), lineTo(), Dan stroke(). Implementasinya seperti di bawah ini:
moveTo(x,y);
lineTo(x,y);
stroke();
Lantas Bagaimana Menerapkannya ke dalam template? Untuk menerapkannya, Silahkan Masukkan Script dibawah ini kedalam Template Blog Percobaan anda sebelumnya. Klik Rancangan > Edit HTML Kemudian Centang Expand Template Widget, sampai disini terserah anda mau menambahkan atau mengganti keseluruhan Script sebelumnya.
Dan berikut Scriptnya:
<?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.stroke();
}
</script>
</head>
<body onload="drawLine()">
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
Jika Sudah, Save Template anda Dan Lihat hasilnya. Jika anda mengikuti Panduannya dengan benar maka anda akan mendapati sebuah garis seperti gambar diatas. Dan Untuk anda yang menggunakan Platform lain silahkan buang bagian skin.
Keterangan:
2. Methods lineTo() digunakan untuk menarik garis dari titik konteks ke titik yang diberikan.
3. Methods stroke() Digunakan untuk memberi warna pada garis dan membuatnya dapat dilihat. Jika tidak dinyatakan, warna Default dari stroke adalah hitam.
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