HTML 5 Canvas Square Line Cap Tutorial [Basic]
Dan kini tibalah kita pada pembahasan terakhir dari pembahasan tentang line. yaitu gaya ketiga yang kita sebut Square. Sama seperti gaya round dipostingan sebelumnya, Untuk square, panjang garis akan meningkat dengan jumlah yang sama dengan lebar garis. Contohnya, jika anda memberikan nilai 200px untuk panjang dan 10px untuk lebar, dan anda menggunakan gaya square cap ini, maka secara otomatis hasilnya akan menjadi 210px untuk panjang, karena setiap cap akan menambahkan 5px untuk panjang garis.
Untuk Melihat Demo-nya terlebih dahulu silahkan KLIK DISINI
Dan disini kita masih akan menggunakan properti
c.lineCap
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.lineWidth=20;
c.strokeStyle="#0000ff"; // line color
c.lineCap="square";
c.stroke();
}
</script>
</head>
<body onload="drawLine()">
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
Dan untuk anda yang sudah mengikuti panduan sebelumnya, silahkan ganti keterangan didalam properti lineCap dengan square, atau jika anda baru bergabung silahkan copas semuanya kedalam template anda. Sedangkan untuk anda yang menggunakan Platform lain silahkan hapus dahulu 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