HTML 5 Canvas Line Color Tutorial [Basic]
Ocre, postingan kali ini pun merupakan kelanjutan dari postingan sebelumnya, yaitu HTML 5 Canvas Line Width Tutorial [Basic]. Namun kali ini, kita akan menggunakan satu Properti baru lagi, yaitu strokeStyle. Lantas apa kegunaannya? strokeStyle digunakan untuk mengatur warna garis Canvas.
Untuk lebih jelasnya anda dapat melihat DEMO-nya DISINI.
Nha, kali ini kita akan menambahkan:
c.strokeStyle
Dan berikut Script Lanjutannya:
<?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=10;
c.strokeStyle="#7CFC00"; // line color
c.stroke();
}
</script>
</head>
<body onload="drawLine()">
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
Untuk anda yang sudah mengikuti panduan sebelumnya, anda hanya perlu menambahkan Properti strokeStyle saja, kemudian 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