Created
August 4, 2017 21:21
-
-
Save Ebrusky/b7e2b553b94d7b4e7041f862e3f8b0c7 to your computer and use it in GitHub Desktop.
Here is an analog clock application source code...
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="400" | |
style="background-color:#333"> | |
</canvas> | |
<h2>Analog Clock</h2> | |
<script> | |
var canvas = document.getElementById("canvas"); | |
var ctx = canvas.getContext("2d"); | |
var radius = canvas.height / 2; | |
ctx.translate(radius, radius); | |
radius = radius * 0.90 | |
setInterval(drawClock, 1000); | |
function drawClock() { | |
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, ' silver'); | |
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(); | |
var second = now.getSeconds(); | |
//hour | |
hour=hour%12; | |
hour=(hour*Math.PI/6)+ | |
(minute*Math.PI/(6*60))+ | |
(second*Math.PI/(360*60)); | |
drawHand(ctx, hour, radius*0.5, radius*0.07); | |
//minute | |
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); | |
drawHand(ctx, minute, radius*0.8, radius*0.07); | |
// second | |
second=(second*Math.PI/30); | |
drawHand(ctx, second, radius*0.9, radius*0.02); | |
} | |
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
drop your question!