Last active
September 3, 2015 07:37
-
-
Save inaz2/d604f18b0ba9b460c050 to your computer and use it in GitHub Desktop.
High-resolution clock using requestAnimationFrame()
This file contains hidden or 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> | |
| <title>High-resolution clock</title> | |
| <h1></h1> | |
| <canvas id="canvas" width="400" height="400"></canvas> | |
| <script> | |
| (function() { | |
| var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || | |
| window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; | |
| var h1 = document.getElementsByTagName("h1")[0]; | |
| var canvas = document.getElementById("canvas"); | |
| var ctx = canvas.getContext('2d'); | |
| function getDateString(d) { | |
| return d.getFullYear() + | |
| '-' + ('0' + (d.getMonth() + 1)).slice(-2) + | |
| '-' + ('0' + d.getDate()).slice(-2) + | |
| ' ' + ('0' + d.getHours()).slice(-2) + | |
| ':' + ('0' + d.getMinutes()).slice(-2) + | |
| ':' + ('0' + d.getSeconds()).slice(-2) + | |
| '.' + ('00' + d.getMilliseconds()).slice(-3); | |
| } | |
| function drawline(width, r, angle) { | |
| var path = new Path2D(); | |
| path.moveTo(canvas.width/2, canvas.height/2); | |
| path.lineTo(canvas.width/2-r*Math.cos(angle*2*Math.PI+Math.PI/2), canvas.width/2-r*Math.sin(angle*2*Math.PI+Math.PI/2)); | |
| ctx.lineWidth = width; | |
| ctx.stroke(path); | |
| } | |
| requestAnimationFrame(function step(timestamp){ | |
| var d = new Date(); | |
| var r_msec = d.getMilliseconds()/1000; | |
| var r_seconds = (d.getSeconds()+r_msec)/60; | |
| var r_minutes = (d.getMinutes()+r_seconds)/60; | |
| var r_hours = (d.getHours()+r_minutes)/12; | |
| h1.textContent = getDateString(d); | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| drawline(10, 80, r_hours); | |
| drawline(5, 120, r_minutes); | |
| drawline(2, 150, r_seconds); | |
| drawline(1, 180, r_msec); | |
| requestAnimationFrame(step); | |
| }); | |
| })(); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://htmlpreview.github.io/?https://gist.githubusercontent.com/inaz2/d604f18b0ba9b460c050/raw/highresclock.html