<!DOCTYPE html>
<html lang="is">
<head>
<meta charset="utf-8">
<title>Klukka</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Ísak Sigurjón Bragason">
<meta name="description" content="Javascript klukka á HTML5 Canvas">
<meta name="keywords" content="HTML5, canvas, javascript, clock">
<style>
body
{
background-color:#272822;
}
canvas
{
display:block;
margin:0 auto;
width:95%;
max-width:700px;
}
</style>
</head>
<body>
<canvas id="klukka"></canvas>
<script>
var //
clockRadius = 250,
color1 = "#f60",
color2 = "#afaead",
color3 = "#cfcecd";
var canvas = document.getElementById("klukka");
canvas.width = Math.ceil(clockRadius * 2.8);
canvas.height = Math.ceil(clockRadius * 2.8);
var //
ctx = canvas.getContext("2d"),
cx = canvas.width / 2,
cy = canvas.height / 2;
function clock () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
var d = new Date(),
h = d.getHours(),
hu = d.getHours(),
m = d.getMinutes(),
s = d.getSeconds();
if (h > 12) {
h -= 12;
} else if (h === 0) {
h = 12;
}
h += m / 60;
var hRadius = clockRadius * 0.6,
hangle = - h / 6 * Math.PI + Math.PI / 2,
hx = cx + (Math.cos(hangle) * hRadius),
hy = cy - (Math.sin(hangle) * hRadius),
mRadius = clockRadius * 0.9,
mangle = - m / 30 * Math.PI + Math.PI / 2,
mx = cx + (Math.cos(mangle) * mRadius),
my = cy - (Math.sin(mangle) * mRadius),
sRadius = clockRadius * 0.9,
sangle = - s / 30 * Math.PI + Math.PI / 2,
sx = cx + (Math.cos(sangle) * sRadius),
sy = cy - (Math.sin(sangle) * sRadius);
ctx.beginPath();
ctx.strokeStyle = color1;
ctx.lineWidth = Math.ceil(0.03 * clockRadius);
ctx.arc(cx, cy, clockRadius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = color2;
ctx.lineWidth = Math.ceil(0.03 * clockRadius);
ctx.arc(cx, cy, clockRadius + 4, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.font = "bold " + Math.floor(0.22 * clockRadius).toString() //
+ "px Monaco, Courier, monospace";
ctx.fillStyle = color2;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(hu.toString().padStart(2, '0') + ":" //
+ m.toString().padStart(2, '0') //
+ ":" + s.toString().padStart(2, '0'), cx, cy + clockRadius / 2);
ctx.closePath();
for(var i = 1; i <= 12; i++) {
var numx = cx + (Math.cos(- i / 6 * Math.PI + Math.PI / 2) //
* Math.floor(clockRadius * 1.25));
var numy = cy - (Math.sin(- i / 6 * Math.PI + Math.PI / 2) //
* Math.floor(clockRadius * 1.25));
var outx = cx + (Math.cos(- i / 6 * Math.PI) //
* Math.ceil(clockRadius * 1));
var outy = cy - (Math.sin(- i / 6 * Math.PI) //
* Math.ceil(clockRadius * 1));
var inx = cx + (Math.cos(- i / 6 * Math.PI) //
* Math.ceil(clockRadius * 0.88));
var iny = cy - (Math.sin(- i / 6 * Math.PI) //
* Math.ceil(clockRadius * 0.88));
ctx.beginPath();
ctx.strokeStyle = color3;
ctx.lineWidth = Math.ceil(0.02 * clockRadius);
ctx.moveTo(inx, iny);
ctx.lineTo(outx, outy);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.font = Math.floor(0.22 * clockRadius).toString() //
+ "px Helvetica, sans-serif";
ctx.fillStyle = color2;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(i, numx, numy);
ctx.closePath();
}
for(var i = 1; i <= 60; i++) {
if ( (i % 5) != 0 ) {
var outx = cx + (Math.cos(- i / 30 * Math.PI) //
* Math.ceil(clockRadius * 1));
var outy = cy - (Math.sin(- i / 30 * Math.PI) //
* Math.ceil(clockRadius * 1));
var inx = cx + (Math.cos(- i / 30 * Math.PI) //
* Math.ceil(clockRadius * 0.94));
var iny = cy - (Math.sin(- i / 30 * Math.PI) //
* Math.ceil(clockRadius * 0.94));
ctx.beginPath();
ctx.strokeStyle = color3;
ctx.lineWidth = Math.ceil(0.01 * clockRadius);
ctx.moveTo(inx, iny);
ctx.lineTo(outx, outy);
ctx.stroke();
ctx.closePath();
}
}
ctx.beginPath();
ctx.strokeStyle = color3;
ctx.lineWidth = Math.ceil(0.1 * clockRadius);
ctx.lineCap = "round";
ctx.moveTo(cx, cy);
ctx.lineTo(hx, hy);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = Math.ceil(0.06 * clockRadius);
ctx.lineCap = "round";
ctx.moveTo(cx, cy);
ctx.lineTo(mx, my);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = Math.ceil(0.04 * clockRadius);
ctx.lineCap = "round";
ctx.moveTo(cx, cy);
ctx.lineTo(sx, sy);
ctx.stroke();
ctx.closePath();
window.requestAnimationFrame(clock);
}
clock();
</script>
</body>
</html>