%canvas#canvas{:width => 500, :height => 500}
View Compiled
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
canvas {
position: absolute;
left: 50%;
top: 50%;
margin: -250px 0 0 -250px;
width: 500px;
height: 500px;
}
View Compiled
function clock(startAngle){
var now = new Date(),
canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
cw = canvas.width,
ch = canvas.height,
x = cw / 2,
y = ch / 2,
radius = Math.min(x, y),
rads = Math.PI/180,
min = now.getMinutes(),
sec = now.getSeconds(),
hr = now.getHours(),
hr = hr>=12 ? hr-12 : hr;
ctx.clearRect(0,0,cw,cw);
ctx.fillStyle = 'hsla(0, 50%, 100%, 1)';
// Seconds
ctx.save();
ctx.translate(x, y);
ctx.rotate(sec * Math.PI/30);
ctx.translate(-x, -y);
for (i = 0; i < 60; i++) {
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x, y, radius, startAngle, startAngle+(Math.PI*2*(1/60)), false);
ctx.fill();
ctx.fillStyle = 'hsla('+ i*6 +', 100%, 50%, .375)';
startAngle = startAngle+(Math.PI*2*(1/60));
}
ctx.restore();
// Minutes
ctx.save();
ctx.translate(x, y);
ctx.rotate((Math.PI/30)*min + (Math.PI/1800)*sec);
ctx.translate(-x, -y);
ctx.fillStyle = 'hsla(0, 50%, 10%, 1)';
for (i = 0; i < 60; i++) {
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x, y, radius/1.1, startAngle, startAngle+(Math.PI*2*(1/60)), false);
ctx.fill();
ctx.fillStyle = 'hsla('+ i*6 +', 100%, 50%, .375)';
startAngle = startAngle+(Math.PI*2*(1/60));
}
ctx.restore();
// Hours
ctx.save();
ctx.translate(x, y);
ctx.rotate(hr*(Math.PI/6)+(Math.PI/360)*min+ (Math.PI/21600)*sec);
ctx.translate(-x, -y);
ctx.fillStyle = 'hsla(30, 100%, 10%, 1)';
for (i = 0; i < 60; i++) {
//if(i%5 === 0) {
ctx.beginPath();
ctx.moveTo(x,y);
ctx.arc(x, y, radius/1.425, startAngle, startAngle+(Math.PI*2*(1/60)), false);
ctx.fill();
ctx.fillStyle = 'hsla('+ i*6 +', 50%, 50%, .5)';
//}
startAngle = startAngle+(Math.PI*2*(1/60));
}
ctx.restore();
}
function init(){
var startAngle = 36;
clock();
setInterval(function(){clock(startAngle)},1000);
}
init();
This Pen doesn't use any external CSS resources.