Blogger Tutorial

HTML 5 Canvas Line Color Tutorial [Basic]

21.28,0 Comments


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





hosting indonesia

You Might Also Like

0 komentar: