Blogger Tutorial

HTML 5 Canvas Square Line Cap Tutorial [Basic]

08.24,0 Comments


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





hosting indonesia

You Might Also Like

0 komentar: