Membuat Jam Tangan Menggunakan Canvas <canvas>

<canvas> merupakan elemen HTML yang dapat digunakan untuk menggambar grafik menggunakan scripting (biasanya JavaScript ). Hal ini sangat memungkinkan <canvas> ini digunakan untuk berbagai keperluan, misalnya, dapat digunakan untuk menggambar grafik, membuat komposisi foto atau melakukan animasi, baik itu yang sederhana atau mungkin yang sedikit lebih rumit.

<canvas> pertama kali diperkenalkan oleh Apple untuk Mac OS X Dashboard dan kemudian diimplementasikan di Safari dan Google Chrome. Gecko 1.8 berbasis browser, seperti Firefox 1.5, juga mendukung elemen ini. Unsur <canvas> merupakan bagian dari spesifikasi aplikasi Web 1.0 WHATWG juga dikenal sebagai HTML 5.

Tutorial saya kali ini adalah Membuat jam tangan menggunakan <canvas>. Sebuah implementasi unsur <canvas> pada halaman HTML.

D e m o :

Implementasi:

Untuk membuatnya, terlebih dahulu download script coolclock.js disini dan untuk Explorer Canvas Anda dapat men-download dari Google Code.

Kemudian kedua script tersebut letakkan sebelum kode </head>:

<!--[if IE]>
<script type="text/javascript" src="URL_excanvas.js"></script>
<![endif]-->
<script src="URL_coolclock.js" type="text/javascript"></script>

Kita juga dapat men-download file moreskins.js, berisi semua model ekstra tambahan dan letakan setelah dua script di atas:

<script src="URL_moreskins.js"type="text/javascript"></ script>

Dan untuk menampilkan jam tangan ini dimanapun anda ingin menampilkannya, gunakan syntax seperti berikut:

<canvas id="JamTangan" class="CoolClock:NamaSkin:radio"></canvas>

Dalam CSS class selalu menempatkan CoolClock dan kemudian memisahkan data dengan dua poin, kita dapat juga menambahkan pengaturan opsional, seperti:

^NamaSkin menunjukkan jenis desain grafis (default adalah swissRail).
^radio adalah ukuran standar, yaitu 85, nilai dinyatakan dalam piksel
^noSeconds menghilangkan point kedua

Jika kita ingin menghilangkan parameter, yaitu hanya menggunakan model standar, kita harus menambahkan dua poin penting:

class="CoolClock:CoolClock:::noSeconds"

Dalam tag CANVAS ini kita dapat menggunakan ID apapun, maka dengan CSS, kita dapat menambahkan berbagai style, sehingga kita dapat menyelaraskannya sesuai dengan keinginan kita.

D e m o :

Untuk lebih mengenal tentang <canvas> silahkan baca tutorialnya disini.


sumber: vagabundia