Miscellaneous/clock_only.html at master · ydsumith/Miscellaneous · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock</title>

<style>

body{
margin:0;
background:black;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

canvas{
background:#111;
border-radius:50%;
}

</style>

</head>

<body>

<canvas id="clock" width="300" height="300"></canvas>

<script>

var canvas=document.getElementById("clock");
var ctx=canvas.getContext("2d");
var radius=canvas.height/2;

ctx.translate(radius,radius);
radius=radius*0.9;

setInterval(drawClock,1000);

function drawClock(){
drawFace(ctx,radius);
drawNumbers(ctx,radius);
drawTime(ctx,radius);
}

function drawFace(ctx,radius){

ctx.beginPath();
ctx.arc(0,0,radius,0,2*Math.PI);
ctx.fillStyle="#000";
ctx.fill();

ctx.strokeStyle="#00ffcc";
ctx.lineWidth=4;
ctx.stroke();

ctx.beginPath();
ctx.arc(0,0,6,0,2*Math.PI);
ctx.fillStyle="#00ffcc";
ctx.fill();
}

function drawNumbers(ctx,radius){
ctx.font=radius*0.15+"px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";

for(num=1;num<=12;num++){
var ang=num*Math.PI/6;
ctx.rotate(ang);
ctx.translate(0,-radius*0.85);
ctx.rotate(-ang);
ctx.fillStyle="#00ffcc";
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%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60));
drawHand(ctx,hour,radius*0.5,6);

minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx,minute,radius*0.8,4);

second=(second*Math.PI/30);
drawHand(ctx,second,radius*0.9,2,"red");
}

function drawHand(ctx,pos,length,width,color="#00ffcc"){
ctx.beginPath();
ctx.lineWidth=width;
ctx.lineCap="round";
ctx.strokeStyle=color;
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0,-length);
ctx.stroke();
ctx.rotate(-pos);
}

</script>

</body>
</html>