Skip to content

Instantly share code, notes, and snippets.

@stavrossk

stavrossk/JavaScript Analog Clock.html

Created December 3, 2014 07:08
Show Gist options
  • Save stavrossk/d927475065994add6ce2 to your computer and use it in GitHub Desktop.
Save stavrossk/d927475065994add6ce2 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Analog Clock using HTML5 canvas and JavaScript.
Raw
JavaScript Analog Clock.html
<!doctype html>
<html>
<head>
<title>Analog Clock using Canvas</title>
</head>
<body>
<canvas id="canvas" width="400" height="400">
</canvas>
</body>
<script>
window.onload = function ()
{
setInterval(showClock, 1000);
function showClock()
{
// DEFINE CANVAS AND ITS CONTEXT.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var date = new Date;
var angle;
var secHandLength = 60;
// CLEAR EVERYTHING ON THE CANVAS. RE-DRAW NEW ELEMENTS EVERY SECOND.
ctx.clearRect(0, 0, canvas.width, canvas.height);
OUTER_DIAL1();
OUTER_DIAL2();
CENTER_DIAL();
MARK_THE_HOURS();
MARK_THE_SECONDS();
SHOW_SECONDS();
SHOW_MINUTES();
SHOW_HOURS();
function OUTER_DIAL1()
{
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, secHandLength + 10, 0, Math.PI * 2);
ctx.strokeStyle = '#92949C';
ctx.stroke();
}
function OUTER_DIAL2()
{
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, secHandLength + 7, 0, Math.PI * 2);
ctx.strokeStyle = '#929BAC';
ctx.stroke();
}
function CENTER_DIAL()
{
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 2, 0, Math.PI * 2);
ctx.lineWidth = 3;
ctx.fillStyle = '#353535';
ctx.strokeStyle = '#0C3D4A';
ctx.stroke();
}
function MARK_THE_HOURS()
{
for (var i = 0; i < 12; i++)
{
angle = (i - 3) * (Math.PI * 2) / 12; // THE ANGLE TO MARK.
ctx.lineWidth = 1; // HAND WIDTH.
ctx.beginPath();
var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength);
var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength);
var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 7));
var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 7));
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#466B76';
ctx.stroke();
}
}
function MARK_THE_SECONDS() {
for (var i = 0; i < 60; i++) {
angle = (i - 3) * (Math.PI * 2) / 60; // THE ANGLE TO MARK.
ctx.lineWidth = 1; // HAND WIDTH.
ctx.beginPath();
var x1 = (canvas.width / 2) + Math.cos(angle) * (secHandLength);
var y1 = (canvas.height / 2) + Math.sin(angle) * (secHandLength);
var x2 = (canvas.width / 2) + Math.cos(angle) * (secHandLength - (secHandLength / 30));
var y2 = (canvas.height / 2) + Math.sin(angle) * (secHandLength - (secHandLength / 30));
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#C4D1D5';
ctx.stroke();
}
}
function SHOW_SECONDS()
{
var sec = date.getSeconds();
angle = ((Math.PI * 2) * (sec / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 0.5; // HAND WIDTH.
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK.
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength), // DRAW THE LENGTH.
canvas.height / 2 + Math.sin(angle) * secHandLength);
// DRAW THE TAIL OF THE SECONDS HAND.
ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK.
ctx.lineTo((canvas.width / 2 - Math.cos(angle) * 20), // DRAW THE LENGTH.
canvas.height / 2 - Math.sin(angle) * 20);
ctx.strokeStyle = '#586A73'; // COLOR OF THE HAND.
ctx.stroke();
}
function SHOW_MINUTES()
{
var min = date.getMinutes();
angle = ((Math.PI * 2) * (min / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 1.5; // HAND WIDTH.
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK.
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength / 1.1), // DRAW THE LENGTH.
canvas.height / 2 + Math.sin(angle) * secHandLength / 1.1);
ctx.strokeStyle = '#999'; // COLOR OF THE HAND.
ctx.stroke();
}
function SHOW_HOURS() {
var hour = date.getHours();
var min = date.getMinutes();
angle = ((Math.PI * 2) * ((hour * 5 + (min / 60) * 5) / 60)) - ((Math.PI * 2) / 4);
ctx.lineWidth = 1.5; // HAND WIDTH.
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2); // START FROM CENTER OF THE CLOCK.
ctx.lineTo((canvas.width / 2 + Math.cos(angle) * secHandLength / 1.5), // DRAW THE LENGTH.
canvas.height / 2 + Math.sin(angle) * secHandLength / 1.5);
ctx.strokeStyle = '#000'; // COLOR OF THE HAND.
ctx.stroke();
}
}
}
</script>
</html>
@Nirjonadda
Copy link

Also how to make clock by county, not user time zone?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment