-
Notifications
You must be signed in to change notification settings - Fork 0
/
clock.html
173 lines (141 loc) · 4.22 KB
/
clock.html
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('example');
if (canvas.getContext) {
var c2d=canvas.getContext('2d');
c2d.clearRect(0,0,460,460);
c2d.fillStyle="#000000"; //color fill for hour text
//Define gradients for 3D / shadow effect
var grad1=c2d.createLinearGradient(0,0,300,300);
grad1.addColorStop(0,"#D83040");
grad1.addColorStop(1,"#801020");
var grad2=c2d.createLinearGradient(0,0,300,300);
grad2.addColorStop(0,"#801020");
grad2.addColorStop(1,"#D83040");
//*/
c2d.font="lighter 20px Arial";
c2d.textBaseline="middle";
c2d.textAlign="center";
c2d.lineWidth=0.5;
c2d.save();
//Cirles around the clock
/*Outer bezel
c2d.strokeStyle=grad1;
c2d.lineWidth=1;
c2d.beginPath();
c2d.arc(150,150,138,0,Math.PI*2,true);
c2d.shadowOffsetX=4;
c2d.shadowOffsetY=4;
c2d.shadowColor="rgba(0,0,0,0.6)";
c2d.shadowBlur=6;
c2d.stroke();*/
/*Inner bezel
c2d.restore();
c2d.strokeStyle=grad2;
c2d.lineWidth=1;
c2d.beginPath();
c2d.arc(150,150,129,0,Math.PI*2,true);
c2d.stroke();
c2d.strokeStyle="#222";*/
//
c2d.save();
c2d.translate(160,160);//*/
//Markings/Numerals
for (i=1;i<=60;i++) {
ang=Math.PI/30*i;
sang=Math.sin(ang);
cang=Math.cos(ang);
//If modulus of divide by 5 is zero then draw an hour marker/numeral
if (i % 5 === 0) {
c2d.lineWidth=3; //main ticks
sx=sang*95;
sy=cang*-95;
ex=sang*120;
ey=cang*-120;
nx=sang*140;//distance from centre
ny=cang*-140;//distance from centre
//"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica
//100 = light , 700 = bold
c2d.font='200 30px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica';
c2d.fillText(i/5,nx,ny);
//Else this is a minute marker
} else {
c2d.lineWidth=1; //minute ticks
sx=sang*110;
sy=cang*110;
ex=sang*120;
ey=cang*120;
}
c2d.beginPath();
c2d.moveTo(sx,sy);
c2d.lineTo(ex,ey);
c2d.stroke();
}
//Fetch the current time
var ampm="AM";
var now=new Date();
var hrs=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
c2d.strokeStyle="#000";
//Draw AM/PM indicator
if (hrs>=12) ampm="PM";
//c2d.lineWidth=1;
//c2d.strokeRect(21,-14,44,27);
c2d.font='normal 20px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica';
c2d.fillText(ampm,43,0);
c2d.lineWidth=6;
c2d.save();
//Draw clock pointers but this time rotate the canvas rather than
//calculate x/y start/end positions.
//
//Draw hour hand. Needs to be more than a line
c2d.rotate(Math.PI/6*(hrs+(min/60)+(sec/3600)));
c2d.beginPath();
c2d.lineWidth=8;
c2d.moveTo(0,2); //second param, sticky out back bit
c2d.lineTo(0,-60); //hand length
c2d.stroke();
c2d.restore();
c2d.save();
//Draw minute hand
c2d.rotate(Math.PI/30*(min+(sec/60)));
c2d.beginPath();
c2d.lineWidth=4;
c2d.moveTo(0,2); //second param
c2d.lineTo(0,-96);//hand length
c2d.stroke();
c2d.restore();
c2d.save();
//Draw second hand
c2d.rotate(Math.PI/30*sec);
c2d.strokeStyle="#E33";
c2d.beginPath();
c2d.lineWidth=2;
//c2d.lineCap="round";
c2d.lineJoin="miter";
c2d.miterLimit=2;
c2d.moveTo(0,10); //sticky out back bit
c2d.lineTo(0,-98);//hand length
c2d.lineTo(0,-110);//hand length
c2d.stroke();
c2d.restore();
//Additional restore to go back to state before translate
//Alternative would be to simply reverse the original translate
c2d.restore();
setTimeout(draw,1000);
}
}
</script>
</head>
<body onload="draw();">
<h3> Clock </h3>
<canvas id="example" width="500" height="500"></canvas>
<hr/>
<a href="https://www.w3schools.com/tags/ref_canvas.asp" target="_blank">canvas doc</a>
</body>
</html>