loading

Jam Analog Dengan Canvas HTML5

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.

Sumber: Wikipedia

Nah Langsung saja pada praktek jam analog, jadi dengan canvas dan javascript, bukan hanya bisa menggambar tapi bisa bergerak.

Jam Analog Canvas

Maaf browser Anda tidak mendukung HTML5 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.

Komentar 2

  1. {code}<canvas id="canvas" width="200" height="200" style="background-color:#666;border:5px solid #337AB7">
    Maaf browser Anda tidak mendukung HTML5 canvas.<br/>
    </canvas>{/code}

    Tulisan Maaf browser Anda tidak mendukung HTML5 canvas itu buat apa? Kok gak muncul?

    BalasHapus
    Balasan
    1. Itu adalah handling jika yang membuka canvas menggunakan browser yang tidak mendukung canvas, misalnya browser jadul.

      Hapus
 
Jika kesulitan memilih ID, gunakan opsi Name/URL, isikan nama Anda, URL isi dengan URL profil facebook atau kalau lupa biarkan kosong. Link aktif di dalam komentar jika tidak relevan akan masuk kotak spam.
<b>, <i> standar bisa digunakan. Tag lain dibawah ini:
{u} text bergaris {/u}
{small} text kecil {/small}
{center} text rata tengah {/center}
{blockquote} text dalam blockquote {/blockquote}
{img} url-gambar {/img}
{youtube} url-video-youtube {/youtube}
{code} kode yang sudah di encode {/code}
Encode kode disini (tidak perlu menambahkan {code} dan {/code}
   

Popular Posts this Week 

Aplikasi Hari Selamatan Orang Meninggal (Perhitungan Online)

Aplikasi Hari Selamatan Orang Meninggal (Perhitungan Online)

Aplikasi Perhitungan Hari Selamatan Orang Meninggal dibawah ini sangat berguna untuk orang jawa, karena di keluarga manapun tidak akan terl...

Tipe Kamu Dari Cara Nyontek dan Perkerjaan Yang Cocok

Tipe Kamu Dari Cara Nyontek dan Perkerjaan Yang Cocok

Tipe Orang Menurut Cara Nyontek mungkin tidak menjadi salah satu ukuran dalam hal yang serius, tapi lumayan untuk menambah referensi dan m...

Kalender 2018 dan Hari Besar Libur Nasional

Kalender 2018 dan Hari Besar Libur Nasional

Download Kalender 2018 dan Hari Besar / Libur / Cuti Nasional dalam file PDF, sebenarnya mau membuat untuk versi kalender 2018 excel, tapi ...