Setelah membuat beberapa tutorial html, kali ini saya juga akan berbagi pengetahuan mengenai cara membuat jam dinding analog dengan html.Cara yang akan kita buat sama seperti tutorial lainnya yaitu tanpa elemen gambar sehingga hanya dengan membuat satu file html maka jam dinding analog ini sudah bisa berjalan.
Cara untuk membuat jam dinding analog ini menggunakan tag canvas yang ada di html 5. tag canvas pada html 5 ini selain dijadikan sebagai bingkai dari jam juga bisa untuk mengambar garis dan lingkaran jam.Seperti kita ketahui bagian jam itu terdiri dari angka yang dibuat melingkar di jam dinding. kemudian jarum untuk menunjukan jam dan biasanya kita sebut dengan jarum pendek. Jarum jam panjang untuk menunjukan menit dan jarum yang berdetak terus menerus untuk menunjukan detik.
Langsung saja berikut adalah langkah-langkah untuk membuat jam dinding analog dengan menggunakan kode html.
- Buka aplikasi notepad untuk menuliskan kode html berikut <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="400" height="400" style="background-color:#0fff"> </canvas> <script> var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 setInterval(gambarjam, 1000); function gambarjam() { drawFace(ctx, radius); angkajam(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, '#00ff'); grad.addColorStop(0.5, 'white'); grad.addColorStop(1, '#00ff'); 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 = '#00ff'; ctx.fill(); } function angkajam(ctx, radius) { var ang; var 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(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour=hour%12; hour=(hour*Math.PI/6)+ (minute*Math.PI/(6*60))+ (second*Math.PI/(360*60)); jarumjam(ctx, hour, radius*0.5, radius*0.07); //minute minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); jarumjam(ctx, minute, radius*0.8, radius*0.07); // second second=(second*Math.PI/30); jarumjam(ctx, second, radius*0.9, radius*0.02); } function jarumjam(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> </body> </html>
- Simpan File tersebut dengan nama jam.html
- Jalankan file jam.html dengan cara mengklik dua kali pada file jam.html,
- Lalu saksikan apa yang terjadi
0 komentar: