Modern Clock
body {
background-color: #2c3e50;
}
canvas {
display: block;
margin: 0 auto;
background-color: #ecf0f1;
border-radius: 50%;
}
var canvas = document.getElementById('clock');
var ctx = canvas.getContext('2d');
var radius = canvas.width / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;
// draw clock
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2*Math.PI);
ctx.fillStyle = '#2c3e50';
ctx.fill();
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#ecf0f1';
ctx.fill();
for (var i = 0; i < 12; i++) {
angle = i * Math.PI / 6;
ctx.rotate(angle);
ctx.translate(0, -radius * 0.85);
ctx.beginPath();
ctx.rect(-2, -10, 4, 20);
ctx.fillStyle = '#ecf0f1';
ctx.fill();
ctx.rotate(-angle);
ctx.translate(0, radius * 0.85);
}
}
// draw time
function drawTime() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// hour hand
hour = hour % 12;
hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
drawHand(hour, radius * 0.5, radius * 0.07, '#ecf0f1');
// minute hand
minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
drawHand(minute, radius * 0.8, radius * 0.07, '#ecf0f1');
// second hand
second = (second * Math.PI / 30);
drawHand(second, radius * 0.9, radius * 0.02, '#e74c3c');
}
// draw hand
function drawHand(pos, length, width, color) {
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.lineCap = 'round';
ctx.moveTo(0, 0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
// loop
setInterval(function() {
ctx.clearRect(-radius, -radius, canvas.width, canvas.height);
drawClock();
drawTime();
}, 1000);
Code for modern looking website. It draws clock that has moving hands as time goes on...
@Royal_Coder | Seek Higher Things