Created
January 2, 2019 20:59
-
-
Save RyanBalfanz/f3901b9555db1d757b17ce961b937741 to your computer and use it in GitHub Desktop.
Analog Clock for ARTIFACT
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This ARTIFACT app was adapted from the Canvas Clock example at W3Schools.