|
|
|
Canvas merupakan salah satu dari banyak fitur yang ada pada html5, dengan canvas kita bisa melakukan drawing / menggambar sebuah object pada halaman web tanpa menggunakan image, pada canvas kita juga membuat sebuah animasi tanpa menggunakan bantuan thrid party aplikasi seperti flash, pada kesempatan kali ini saya akan mencoba mengajak teman-teman untuk membuat sebuah tag cloud menggunakan canvas pada html5 tag cloud ini nantinya akan ber-animasi seperti halnya tag-cloud yang ada pada plugin wordpress, bisa berputar-putar layaknya sebuah animasi flash, disini kita hanya membutuhkan sebuah plugin yang namanya tagCanvas, tagCanvas ini sebenarnya modifikasi dari ExplorerCanvas, oke dari pada banyak basa basi lebih baik kita mulai saja, untuk membuat sebuah tag cloud berbasis html5 ini yang kita butuhkan adalah
- jquery Terbaru
- excanvas untuk browser IE
- jquery.tagcanvas.min.js Merupakan plugin untuk Jquery
Instalasi dan Penggunaan
Instalasinya cukup mudah, yang pertama kita hanya perlu memanggil Jquery, kemudian di lanjutkan dengan memanggil tagCanvas yang merupakan plugin untuk Jquerynya, dan kita tambahkan baris untuk mengantisipasi jika pengunjung menggunakan browser IE (Internet Explorer),
<!DOCTYPE HTML>
<head> <title>Tag CLoud Dengan HTML5<title> <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]--> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script src="jquery.tagcanvas.min.js" type="text/javascript"></script> </head> <body> </body> </html> |
Kemudian kita mendifinisikan letak canvas yang akan kita gunakan nantinya dalam scop body pada halaman web kita, dan meng-aktivkannya begitu halaman diload dalam kasus ini kita menggunakan Jquery, walapun pada dasarnya tagCanvas bisa digunakan tanpa menggunakan Jquery, tetapi akan lebih mudah jika kita menggunakannya dengan gabungan Jquery
<!DOCTYPE HTML>
<head> <title>Tag CLoud Dengan HTML5<title> <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]--> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script src="jquery.tagcanvas.min.js" type="text/javascript"></script> <script> $(function(){ if(!$('#myCanvas').tagcanvas({ textColour: '#0A67C5', textFont:"roid Sans',Arial", outlineColour: "#000", outlineThickness : 0, shadow: "#000000", frontSelect:true, reverse: true, txtOpt: true, depth: 0.8, maxSpeed: 0.05 },'tags')) { $('#myCanvasContainer').hide(); } }); </script> </head> <body> <div id="myCanvasContainer"> <canvas width="240" height="220" id="myCanvas"> <p>Browser Ente ga Suport canvas HTML5 om</p> </canvas> </div> <div id="tags"> <ul> <li><a href="http://www.devilzc0de.org/forum" target="_blank">Devilzc0de</a></li> <li><a href="http://www.antijasakom.net/forum" target="_blank">Antijasakom</a></li> <li><a href="http://www.labs-khairu.com" target="_blank">My Labs</a></li> <li><a href="http://www.berita-hacker.com" target="_blank">Berita Hacker</a></li> </ul> </div> </body> </html> |
Cukup Mudah kan cara membuat Tag CLoud Dengan HTML5 dan TagCanvas Plugin dari Jquery ? untuk demonya teman-teman bisa melihat pada bagian sidebar blog saya ini, untuk opsi-opsi yang bisa teman-teman gunakan sebenarnya cukup banyak, hanya saja saya pikir bagian yang digunakan adalah bagian-bagian yang penting sajam, jika teman-teman masih merasa kurang puas dengan opsi yang sudah ada teman-teman bisa langsung mengeceknya di situs penyedia aslinya, disana di jelaskan opsi-opsi yang bisa teman-teman gunakan, sekian dulu and Thanks for reading
Related Posts
