HTML 5 Canvas Round Line Cap Tutorial [Basic]
Ocre, Setelah sebelumnya kita telah membahas Butt line sebagai kondisi Default, HTML 5 Canvas line, kali ini kita akan membahas lanjutannya, yaitu HTML5 Canvas Round Line Cap atau dengan menggunakan gaya Round Cap.
Untuk round, 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 round cap ini, maka secara otomatis hasilnya akan menjadi 210px untuk panjang, karena setiap cap akan menambahkan 5px untuk panjang garis.
Untuk demonya silahkan KLIK DISINI
Dan disini kita masih akan menggunakan properti yang saya, yaitu:
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="round";
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 round, 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