Skip to content

Instantly share code, notes, and snippets.

@2aces
Created January 21, 2018 23:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 2aces/f226596557c594f9d7e5552da861b963 to your computer and use it in GitHub Desktop.
Save 2aces/f226596557c594f9d7e5552da861b963 to your computer and use it in GitHub Desktop.
Javascript and HTML5 Canvas clock
// taken from http://completewebdevelopercourse.com/content/10-html5css3/11.5.html
<canvas id="clock" width="500" height="500">
Please upgrade your browser.
</canvas>
// taken from http://completewebdevelopercourse.com/content/10-html5css3/11.5.html
function setTime() {
var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");
var clockRadius = canvas.width/2;
context.beginPath();
context.fillStyle = "black";
context.arc(clockRadius, clockRadius, clockRadius, 0, 2*Math.PI);
context.fill();
context.fillStyle = "white";
context.beginPath();
context.arc(clockRadius, clockRadius, 10, 0, 2*Math.PI);
context.fill();
context.font = clockRadius / 10 + "px arial";
context.textAlign = "center";
context.textBaseline = "middle";
for (var i = 1; i <= 12; i++) {
context.fillText(i, clockRadius + clockRadius * 0.9 * Math.sin(i * 2*Math.PI / 12), clockRadius - (clockRadius * 0.9 * Math.cos(i * 2 * Math.PI / 12)));
}
var hours = new Date().getHours();
var minutes = new Date().getMinutes();
var seconds = new Date().getSeconds();
var fullHours = hours % 12 + minutes / 60 + seconds / 3600;
var hoursAngle = fullHours * 2 * Math.PI / 12;
var minutesAngle = minutes * 2 * Math.PI / 60;
var secondsAngle = seconds * 2 * Math.PI / 60;
context.strokeStyle = "white";
context.moveTo(clockRadius, clockRadius);
context.lineTo(clockRadius + clockRadius * 0.6 * Math.sin(hoursAngle), clockRadius - (clockRadius * 0.6 * Math.cos(hoursAngle)));
context.lineWidth = 5;
context.stroke();
context.moveTo(clockRadius, clockRadius);
context.lineTo(clockRadius + clockRadius * 0.8 * Math.sin(minutesAngle), clockRadius - (clockRadius * 0.8 * Math.cos(minutesAngle)));
context.lineWidth = 3;
context.stroke();
context.moveTo(clockRadius, clockRadius);
context.lineTo(clockRadius + clockRadius * 0.9 * Math.sin(secondsAngle), clockRadius - (clockRadius * 0.9 * Math.cos(secondsAngle)));
context.lineWidth = 2;
context.stroke();
}
setInterval(setTime, 1000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment