HTML 5 Canvas Butt Line Cap Tutorial [Basic]
Ocre masih lanjutan dari postingan kemaren [HTML5 Canvas Line Color Tutorial], kali ini kita akan beralih ke properti selanjutnya yaitu lineCap. Hem... berhubung bahasa inggris saya katro dan Buku Introducing HTML 5 Karangan Bruce Lawson and Remy Sharp isinya Full English, jadi kita artikan dulu deh maksud dari lineCap ini hhe... klo arti ngawur dari Cap sih Topi tapi bisa juga tutup dan karena disini hubunganya sama Garis saya anggap artinya adalah Garis penutup. klo ada yang gak setuju dan bahasa inggrisnya lebih baik dan berminat mengkoreksi nggeh monggo. akan saya ganti nanti hhe...
Nha, line sendiri dapat memiliki atau menggunakan salah satu dari ketiga gaya Cap, yaitu: butt, round, atau square. Tapi dalam kondisi Default, HTML 5 Canvas line akan menggunakan gaya butt cap.
Untuk itu pembahasannya akan kita awali dari Butt line Cap. Dan properti yang akan kita gunakan untuk butt, round, atau square adalah:
c.lineCap
Sebelum Beralih ke Scriptnya, Silahkan lihat dahulu DEMO-nya DISINI
Dan berikut Script untuk pengimplementasiannya:
<?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=20;
c.strokeStyle="#0000ff"; // line color
c.lineCap="butt";
c.stroke();
}
</script>
</head>
<body onload="drawLine()">
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
Untuk anda yang sudah mengikuti tutorial sebelumnya seperti biasa anda hanya tinggal menambahkan properti barunya saja, dalam hal ini adalah c.lineCap="butt";, atau klo anda lebih suka menggantinya dengan Script langsung jadinya pun silahkan. Sedangkan untuk anda yang menggunakan Platform lain, silahkan Hapus bagian Skin.
Jika Sudah, save template anda 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
Posting Komentar
Posting Komentar