HTML 5 Canvas Circle Tutorial [Basic]
Setelah membahas HTML 5 Canvas Rectangle Tutorial [Basic], belum lengkap rasanya jika kita tidak membahas Kanvas Lingkaran untuk HTML 5. Disini, kita dapat membuat sebuah busur dengan Method arc(). Disini kita bisa menentukan sudutnya dimulai dari 0 dan sudut berakhir sebagai 2*PI, atau bisa dikatakan Sebuah lingkaran di HTML 5 dapat kita buat dengan menumpuk 2 buah busur.
Berikut susunan Method kita kali ini:
Silahkan KLIK DISINI untuk melihat Demonya
Dan Berikut Script yang dapat anda gunakan:
Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.
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
Berikut susunan Method kita kali ini:
c.arc(centerX,centerY,radius,0,2*Math.PI,false);
Silahkan KLIK DISINI untuk melihat Demonya
Dan Berikut Script yang dapat anda gunakan:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>
function drawCircle() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
var centerX = 288;
var centerY = 100;
var radius = 70;
c.arc(centerX,centerY,radius,0, 2*Math.PI,false);
c.fillStyle="#8ED6FF";
c.fill();
c.lineWidth=5;
c.strokeStyle="black";
c.stroke();
}
</script>
</head>
<body onload="drawCircle()">
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.
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