HTML 5 Canvas Semicircle Tutorial [Basic]
Ocre setelah mempelajari HTML 5 Canvas Circle Tutorial [Basic], pembahasan kita selanjutnya adalah HTML5 Canvas Semicircle(setengah lingkaran). Untuk dapat membuat Kanvas setengah lingkaran pada HTML 5, kita dapat menggunakan Method arc() dan mendefinisikan sudut akhir sebagai startingAngle + PI.
Untuk lebih jelasnya, berikut Susunan Method kita kali ini:
Untuk Demonya, silahkan KLIK DISINI
Dan berikut Scriptnya:
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
Untuk lebih jelasnya, berikut Susunan Method kita kali ini:
c.arc(centerX,centerY,radius,startingAngle,
startingAngle + Math.PI,antiClockwise);
Untuk Demonya, silahkan KLIK DISINI
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 drawSemicircle() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
var centerX = 288;
var centerY = 75;
var radius = 70;
var lineWidth = 5;
c.arc(centerX,centerY,radius,0, Math.PI,false);
c.lineWidth=lineWidth;
c.fillStyle="#8ED6FF";
c.fill();
c.moveTo(centerX - radius - lineWidth/2, centerY);
c.lineTo(centerX + radius + lineWidth/2, centerY);
c.strokeStyle="black";
c.stroke();
}
</script>
</head>
<body onload="drawSemicircle()">
<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