HTML 5 Canvas Bevel Line Join [Basic]
Nha, postingan kali ini adalah bagian terakhir dari pembahasan kita tentang Line Join. Untuk itu saya anjurkan anda baca terlebih dulu pembahasan tentang HTML 5 Canvas Miter Line Join [Basic] dan HTML 5 Canvas Round Line Join [Basic] agar nantinya anda tidak ngawur dan ng'lantur mendefinisikan Properti lineJoin.
Masih sama dengan 2 postingan sebelumnya, disinipun kita masih akan bermain dengan Properti 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="bevel";
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
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