Jam Analog Canvas - HTML5 memang semakin bisa apa saja, object yang dahulu hanya bisa dilakukan dengan gambar dengan HTML 5 bisa dilakukan dengan kode HTML dan script. Dibawah adalah jam analog yang dibuat dengan canvas. Apa itu canvas? yang jelas maksudnya bukan yang dipakai untuk melukis ya, hanya saja memang digunakan untuk melukis di browser. 
Canvas awalnya diperkenalkan oleh Apple untuk digunakan dalam komponen sendiri OS Mac X WebKit pada tahun 2004, menggerakkan aplikasi seperti widget Dashboard dan browser Safari. Kemudian, pada tahun 2005 itu diadopsi dalam versi 1,8 browser Gecko, dan Opera pada tahun 2006, dan standar oleh Teknologi Hypertext Aplikasi Web Kelompok Kerja (WHATWG) pada spesifikasi yang diusulkan baru untuk teknologi web generasi berikutnya.
Canvas terdiri dari suatu daerah dapat ditarik didefinisikan dalam kode HTML dengan atribut tinggi dan atribut lebar. Kode JavaScript dapat mengakses daerah melalui set lengkap menggambar fungsi yang sama dengan yang lainnya API 2D umum, sehingga memungkinkan untuk grafis yang dihasilkan secara dinamis. Beberapa penggunaan diantisipasi canvas mencakup grafik bangunan, animasi, game, dan komposisi gambar.
Nah Langsung saja pada praktek jam analog, jadi dengan canvas dan javascript, bukan hanya bisa menggambar tapi bisa bergerak.
Jam Analog Canvas
Berikut ini script kodenya, HTML dan Javascriptnya sekalian:
<canvas id="canvas" width="200" height="200" style="background-color:#666;border:5px solid #337AB7">
Maaf browser Anda tidak mendukung HTML5 canvas.<br/>
</canvas>
<script>
var canvas = document.getElementById( "canvas" ),
ctx = canvas.getContext( "2d" ),
radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90;
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
};
function drawFace( ctx, radius ) {
var grad;
ctx.beginPath();
ctx.arc( 0, 0, radius, 0, 2 * Math.PI );
ctx.fillStyle = "white";
ctx.fill();
grad = ctx.createRadialGradient( 0, 0, radius * 0.95, 0, 0, radius * 1.05 );
grad.addColorStop( 0, "#333" );
grad.addColorStop( 0.5, "white" );
grad.addColorStop( 1, "#333" );
ctx.strokeStyle = grad;
ctx.lineWidth = radius * 0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc( 0, 0, radius * 0.1, 0, 2 * Math.PI );
ctx.fillStyle = "#333";
ctx.fill();
};
function drawNumbers( ctx, radius ) {
var ang, num;
ctx.font = radius * 0.15 + "px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
for( num = 1; num < 13; num++ ) {
ang = num * Math.PI / 6;
ctx.rotate( ang );
ctx.translate( 0, -radius * 0.85 );
ctx.rotate( -ang );
ctx.fillText( num.toString(), 0, 0 );
ctx.rotate( ang );
ctx.translate( 0, radius * 0.85 );
ctx.rotate( -ang );
}
};
function drawTime( ctx, radius ) {
var now = new Date(),
hour = now.getHours(),
minute = now.getMinutes(),
second = now.getSeconds();
//hour
hour = hour % 12;
hour = ( hour * Math.PI / 6 ) +
( minute * Math.PI / ( 6 * 60 ) ) +
( second * Math.PI / ( 360 * 60 ) );
drawHand( ctx, hour, radius * 0.5, radius * 0.07 );
//minute
minute = ( minute * Math.PI / 30 ) + ( second * Math.PI / ( 30 * 60 ) );
drawHand( ctx, minute, radius * 0.8, radius * 0.07 );
// second
second = ( second * Math.PI / 30 );
drawHand( ctx, second, radius * 0.9, radius * 0.02 );
};
function drawHand( ctx, pos, length, width ) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo( 0, 0 );
ctx.rotate( pos );
ctx.lineTo( 0, -length );
ctx.stroke();
ctx.rotate( -pos );
};
</script>Ditempel dimana saja kode diatas, akan membentuk jam persis seperti tampilan diatas, dengan catatan browsernya mendukung HTML5.
Cukup sekian catatan kali ini, biar tidak lupa.
