HTML 5 Canvas Miter Line Join [Basic]
OK, melanjutkan pembahasan kita sebelumnya, kali ini saya ingin mengajak anda untuk beralih ke properti selanjutnya, yaitu: lineJoin (garis terhubung). Untuk membuat sebuah Garis terhubung atau line join ini, kita dapat menggunakan properti lineJoin, dengan memilih salah satu dari 3 gaya atau deklarasinya, yaitu: miter, round, atau bevel. Dalam keadaan Default, gaya yang akan digunakan adalah miter.
Dalam pembahasan tentang Line Join ini, saya akan membaginya kedalam 3 postingan berbeda, untuk itu tolong pelajari dengan urut untuk bisa mengikuti pembahasan selanjutnya. Dan kali ini saya akan terlebih dahulu membahas tentang HTML5 Canvas Miter Line Join.
Berikut Properti yang kita gunakan disini:
Untuk melihat Demonya, Silahkan KLIK DISINI, Dan berikut Scriptnya:
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.
Ps: Untuk pembahasan tentang Path anda akan mengalami kesulitan untuk membedakan Path jika garis yang anda buat terlalu tipis dan tidak terhubung dibagian sudur.
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
Dalam pembahasan tentang Line Join ini, saya akan membaginya kedalam 3 postingan berbeda, untuk itu tolong pelajari dengan urut untuk bisa mengikuti pembahasan selanjutnya. Dan kali ini saya akan terlebih dahulu membahas tentang HTML5 Canvas Miter Line Join.
Berikut Properti yang kita gunakan disini:
c.lineJoin
Untuk melihat Demonya, Silahkan KLIK DISINI, 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.beginPath();
c.moveTo(130,25);
c.lineTo(230,165); // line 1
c.lineTo(330,25); // line 2
c.lineTo(430,165); // line 3
c.lineWidth=25;
c.lineJoin="miter";
c.stroke();
}
</script>
</head>
<body onload="drawLine()">
<canvas id="myCanvas" width="576" 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.
Ps: Untuk pembahasan tentang Path anda akan mengalami kesulitan untuk membedakan Path jika garis yang anda buat terlalu tipis dan tidak terhubung dibagian sudur.
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