Skip to content

Instantly share code, notes, and snippets.

@RyanBalfanz
Created January 2, 2019 20:59
Show Gist options
  • Save RyanBalfanz/f3901b9555db1d757b17ce961b937741 to your computer and use it in GitHub Desktop.
Save RyanBalfanz/f3901b9555db1d757b17ce961b937741 to your computer and use it in GitHub Desktop.
Analog Clock for ARTIFACT
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="300" style="background-color:#333"></canvas>
<script>
console.info('Adapted for ARTIFACT from https://www.w3schools.com/graphics/canvas_clock_start.asp');
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius + 50, radius);
radius = radius * 0.90;
setInterval(drawClock, 1000);
drawClock();
function drawClock() {
console.log('drawing clock');
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius * 0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius * 0.15 + "px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
for (num = 1; num < 13; num++) {
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius) {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
hour = hour % 12;
hour = (hour * Math.PI / 6) +
(minute * Math.PI / (6 * 60));
drawHand(ctx, hour, radius * 0.5, radius * 0.07);
minute = (minute * Math.PI / 30);
drawHand(ctx, minute, radius * 0.8, radius * 0.07);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0, 0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
</body>
</html>
@RyanBalfanz
Copy link
Author

This ARTIFACT app was adapted from the Canvas Clock example at W3Schools.

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