HTML 5 Canvas Arc Tutorial [Basic]
Setelah kemaren kita membahas tentang HTML 5 Canvas Line, yang saya bagi menjadi 3 postingan. yaitu: HTML 5 Canvas Butt Line Cap Tutorial [Basic], HTML 5 Canvas Round Line Cap Tutorial [Basic], Dan HTML 5 Canvas Square Line Cap Tutorial [Basic], kali ini kita akan beralih ke topik selanjutnya, yaitu HTML 5 Canvas Arc.
Dari namanya aja anda pasti bisa nebak sendiri bentuk dari HTML 5 Canvas Arc ini hhe... Yupz, tepat bentuknya emank membusur sesuai namanya. Dan untuk membuat sebuah busur atau arc dalam HTML5 Canvas, kita membutuhkan Methods baru, yaitu arc(). Busur sendiri didefinisikan sebagai sebuah titik pusat, sebuah radius, sebuah titik awal, sebuah sudut akhir, Dan arah gambar yang dalam hal ini adalah busur(baik arahnya berlawanan dengan arah jarum jam ataupun sebaliknya yakni searah jarum jam).
Sebelum melangkah ke Script untuk HTML 5 Canvas Arc ini, silahkan lihat Demo-nya terlebih dahulu, KLIK DISINI
Nha, jika sudah saya akan terlebih dahulu memperkenalkan Methods baru kita ini:
arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
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 drawArc() {
var canvas=document.getElementById("myCanvas");
var c=canvas.getContext("2d");
var centerX = 288;
var centerY = 160;
var radius= 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;
c.arc(centerX,centerY, radius, startingAngle,
endingAngle,counterclockwise);
c.lineWidth=15;
c.strokeStyle="black"; // line color
c.stroke();
}
</script>
</head>
<body onload="drawArc()">
<canvas id="myCanvas" width="578" height="250"></canvas>
</body>
</html>
Seperti biasa 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 skinnya.
Keterangan Dan Penjelasan HTML 5 Canvas Arc:
Perhatikan Diagram diatas, Dapat kita lihat bahwa sebuah busur atau arc tidak melebihi satu bagian dari keliling lingkaran imaginer atau dengan kata lain sebuah busur tidak lebih dari setengah lingkaran. Lingkaran Imaginer ini sendiri dapat didefinisikan oleh centerX, centerY, Dan radius (pusatX, pusatY, Dan Radius).
Selanjutnya, kita dapat mendefinisikan Busur atau Arc ini sendiri dengan kedua titik disepanjang lingkaran imaginer ini yang didefinisikan sebagai startingAngle and endingAngle(sudut awal dan sudut akhir). Kedua sudut inilah yang nantinya akan didefinisikan di dalam Radians dan akan membentuk garis Imaginer yang berasal dari pusat lingkaran Dan memotong ujung busur yang ingin kita Ciptakan.
Banyak Pakar HTML 5 sebelumnya menyatakan, antiClockwise atau arah berlawanan dari arah Jarum jam merupakan parameter yang mendefinisikan arah busur diantara dua titik akhir secara Default karena kita nyatakan false. Namun kini, pernyataan tersebut banyak disanggah karena busur pun bisa ditarik searah dengan jarum jam dalam keadaan default.
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