Special thanks to my father and markE, who gave me the advice.
Check out the right sidebar of blog gue.
Kalau mau minta aja, bisa custom juga, misalnya, pilih background sendiri, mau warna atau gambar.. warna jarumnya juga bisa diganti :D
Dan, keunggulannya ada di speed. It's blazing fast, dibandingin sama jam flash biasa, jam HTML 5 jauh lebih powerful dan lebih cepat, jadi nggak ngelambatin.
Here is the uncustomized code, kode mentahnya (tanpa background, bentuk jarum standar):
<canvas id="myClock" width="200" height="140" align="center"></canvas>
<script>
// MyClock is a clock built using HTML 5 Canvas Element
// By Akhyar Kamili @akhyarkamili 2/26/2013
// Thanks for the help markE!
var canvas = document.getElementById("myClock");
var context = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var radiusSecs = 45;
var radiusMins = 35;
var radiusHours = 25;
var centerX = canvasWidth / 2;
var centerY = canvasHeight / 2;
function startClock() {
var date = new Date;
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var h = checkHours(date.getHours());
var hours = h+minutes*10/600;
var a = new Object;
a.detik = seconds*6;
a.menit = minutes*6;
a.jam = hours*30;
var angleSecs = 1/2*Math.PI - a.detik*Math.PI/180;
var angleMins = 1/2*Math.PI - a.menit*Math.PI/180;
var angleHours = 1/2*Math.PI - a.jam*Math.PI/180;
if(a > 360)
a = 0;
context.clearRect(0,0, canvasWidth, canvasHeight);
context.save();
drawSeconds(angleSecs);
drawMinutes(angleMins);
drawHours(angleHours);
drawNumbers();
context.restore()
setTimeout(startClock, 500);
}
function drawMinutes(angleMins) {
var angleChange = Math.PI/180 * 12;
var xTarget = centerX + Math.cos(angleMins)*radiusMins;
var yTarget = centerY - Math.sin(angleMins)*radiusMins;
xSampingKanan = centerX + Math.cos(angleMins+angleChange)*8;
ySampingKanan = centerY - Math.sin(angleMins+angleChange)*8;
xSampingKiri = centerX + Math.cos(angleMins-angleChange)*8;
ySampingKiri = centerY - Math.sin(angleMins-angleChange)*8;
context.beginPath();
context.moveTo(centerX, centerY);
context.lineWidth = 1;
context.strokeStyle = '#ff0000';
context.lineTo(xSampingKanan, ySampingKanan);
context.lineTo(xTarget, yTarget);
context.lineTo(xSampingKiri, ySampingKiri);
context.closePath();
context.stroke();
}
function drawHours(angleHours) {
var angleChange = Math.PI/180 * 15;
var xTarget = centerX + Math.cos(angleHours)*radiusHours;
var yTarget = centerY - Math.sin(angleHours)*radiusHours;
xSampingKanan = centerX + Math.cos(angleHours+angleChange)*8;
ySampingKanan = centerY - Math.sin(angleHours+angleChange)*8;
xSampingKiri = centerX + Math.cos(angleHours-angleChange)*8;
ySampingKiri = centerY - Math.sin(angleHours-angleChange)*8;
context.beginPath();
context.moveTo(centerX, centerY);
context.lineTo(xSampingKanan, ySampingKanan);
context.lineTo(xTarget, yTarget);
context.lineTo(xSampingKiri, ySampingKiri);
context.lineWidth = 1;
context.strokeStyle = '#00ff00';
context.closePath();
context.stroke();
}
function drawSeconds(angleSecs) {
var angleChange = Math.PI/180 * 10;
var xTarget = centerX + Math.cos(angleSecs)*radiusSecs;
var yTarget = centerY - Math.sin(angleSecs)*radiusSecs;
xSampingKanan = centerX + Math.cos(angleSecs+angleChange)*8;
ySampingKanan = centerY - Math.sin(angleSecs+angleChange)*8;
xSampingKiri = centerX + Math.cos(angleSecs-angleChange)*8;
ySampingKiri = centerY - Math.sin(angleSecs-angleChange)*8;
context.beginPath();
context.moveTo(centerX, centerY);
context.lineWidth = 1;
context.strokeStyle = '#0000ff';
context.lineTo(xSampingKanan, ySampingKanan);
context.lineTo(xTarget, yTarget);
context.lineTo(xSampingKiri, ySampingKiri);
context.closePath();
context.stroke();
}
function checkHours(i) {
if(i>12);
i = i-12;
return i;
}
function drawNumbers() {
for(var i=1;i<13;i++) {
var angleHours = 1/2*Math.PI - (Math.PI/180)*(i*30);
var xTarget = centerX + Math.cos(angleHours)*(radiusSecs+15);
var yTarget = centerY - Math.sin(angleHours)*(radiusSecs+15);
context.fillStyle = '#eeeeee';
context.fillText(i, xTarget, yTarget);
context.globalCompositeOperation = 'source-over';
}
}
Minimum browser requirements: Firefox 7+, Chrome 15+, Internet Explorer 9+, Opera 11+;
Browser kamu support HTML 5 nggak? coba cek disini: html5test.com
Ini udah bisa dimasukkin di blog kamu, tinggal add gadget, pilih HTML/JavaScript, copy deh!
