HTML 5 Canvas Oval Tutorial [Basic]
Melanjutkan pembahasan kita tentang HTML 5 Canvas Semicircle Tutorial [Basic], kali ini saya ingin mengajak anda untuk membuat Bentuk Oval dengan memanfaatkan HTML 5 tentunya. Untuk membuat bentuk oval, kita dapat menggunakan Method bezierCurveTo(), yang Control point-nya terletak pada 4 sudut dari sebuah persegi panjang Imaginer yang nantinya membingkai bentuk Oval.
Nha Method yang akan kita gunakan kali ini adalah:
Untuk Demo-nya silahkan KLIK DISINI
Dan berikut Script untuk pembuatannya:
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
Nha Method yang akan kita gunakan kali ini adalah:
c.bezierCurveTo(cPointX1, cPointY1, cPointX2, cPointY2, endPointX, endPointY);
Untuk Demo-nya silahkan KLIK DISINI
Dan berikut Script untuk pembuatannya:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>
function drawOval() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
// define center of oval
var centerX = 288;
var centerY = 100;
// define size of oval
var height = 100;
var width = 250;
var controlRectWidth = width * 1.33;
c.beginPath();
c.moveTo(centerX,centerY - height/2);
// draw left side of oval
c.bezierCurveTo(centerX-controlRectWidth/2,centerY-height/2,
centerX-controlRectWidth/2,centerY+height/2,
centerX,centerY+height/2);
// draw right side of oval
c.bezierCurveTo(centerX+controlRectWidth/2,centerY+height/2,
centerX+controlRectWidth/2,centerY-height/2,
centerX,centerY-height/2);
c.fillStyle="#8ED6FF";
c.fill();
c.lineWidth=5;
c.strokeStyle="black";
c.stroke();
c.closePath();
}
</script>
</head>
<body onload="drawOval()">
<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