1+ <!doctype html>
2+ <!-- Based on https://www.programmersought.com/article/31327047900/ -->
3+ < html lang ="en ">
4+ < head >
5+ < meta http-equiv ="Content-Type " content ="text/html;charset=UTF-8 ">
6+ < style >
7+ canvas {
8+ display : block;
9+ margin : auto;
10+ border : 1px solid # CCC
11+ }
12+ </ style >
13+ < title > Flat Clock</ title >
14+ </ head >
15+ < body onload ="setInterval (ApiTime, 500) ">
16+ < canvas id ="canvas " > Your browser does not support canvas</ canvas >
17+ </ body >
18+ < script >
19+
20+ var canvas = document . getElementById ( "canvas" ) ;
21+ var ctx = canvas . getContext ( "2d" ) ;
22+ var width = 1000 ;
23+ var height = 500 ;
24+ var cx = width / 2 ; // Canvas center x
25+ var cy = height / 2 ; // Canvas center y
26+
27+ var size = 200 ; // table size
28+
29+ canvas . width = width ;
30+ canvas . height = height ;
31+
32+ //draw();
33+
34+ function draw ( hours , mins , secs ) {
35+ // // Time class
36+ // var date = new Date();
37+ // // When getting
38+ // var hours = date.getHours();
39+ // // Get points
40+ // var min = date.getMinutes();
41+ // // Get seconds
42+ // var sec = date.getSeconds();
43+ // outer ring
44+ drawOuter ( ) ;
45+ // time
46+ drawText ( ) ;
47+ // scale
48+ drawScale ( ) ;
49+ // hour hand
50+ drawHour ( hours , mins ) ;
51+ // minute hand
52+ drawMid ( mins , secs ) ;
53+ // second hand
54+ drawSec ( secs ) ;
55+ }
56+
57+ // Draw the outer circle of the watch
58+ function drawOuter ( ) {
59+ // outermost circle
60+ ctx . arc ( cx , cy , size + 30 , 0 , Math . PI * 2 ) ;
61+ ctx . fillStyle = "#000033" ;
62+ ctx . fill ( ) ;
63+ ctx . beginPath ( ) ;
64+
65+ // inner circle
66+ ctx . arc ( cx , cy , size , 0 , Math . PI * 2 ) ;
67+ ctx . fillStyle = "white" ;
68+ ctx . fill ( ) ;
69+ ctx . beginPath ( ) ;
70+
71+ // middle origin
72+ ctx . arc ( cx , cy , 10 , 0 , Math . PI * 2 ) ;
73+ ctx . fillStyle = "#000033" ;
74+ ctx . fill ( ) ;
75+ ctx . beginPath ( ) ;
76+ }
77+
78+ // Painting
79+ function drawText ( ) {
80+ var radian = 0 , x = 0 , y = 0 ;
81+ var angle = - 60 ; // start drawing from 1 point, the angle between 1 and 2 is 30 degrees
82+ for ( var i = 0 ; i < 12 ; i ++ ) {
83+ radian = angle * Math . PI / 180 ;
84+ x = Math . cos ( radian ) * ( size - 50 ) + cx ;
85+ y = Math . sin ( radian ) * ( size - 50 ) + cy ;
86+ ctx . textAlign = "center" ; // text is centered horizontally
87+ ctx . textBaseline = "middle" ; // The text is centered vertically
88+ ctx . font = "45px Arial" ;
89+ ctx . fillText ( i + 1 , x , y ) ;
90+ ctx . beginPath ( ) ;
91+ angle += 30 ;
92+ }
93+ }
94+
95+ // draw scale
96+ function drawScale ( ) {
97+ var radian = 0 , x = 0 , y = 0 ;
98+ var s = 15 ;
99+ var lineWidth = 0 ;
100+ for ( var angle = 0 ; angle <= 360 ; angle += 6 ) {
101+ radian = angle * Math . PI / 180 ;
102+
103+ // draw long scale
104+ if ( angle % 30 == 0 ) {
105+ s = 20 ;
106+ lineWidth = 3 ;
107+ }
108+ // draw short
109+ else {
110+ s = 15 ;
111+ lineWidth = 1 ;
112+ }
113+
114+ // The starting point of the scale is size-s
115+ x = Math . cos ( radian ) * ( size - s ) + cx ;
116+ y = Math . sin ( radian ) * ( size - s ) + cy ;
117+ ctx . moveTo ( x , y ) ;
118+
119+ // End of scale
120+ for ( var j = 0 ; j < s ; j ++ ) {
121+ x += Math . cos ( radian ) ;
122+ y += Math . sin ( radian ) ;
123+ }
124+ ctx . lineTo ( x , y ) ;
125+
126+ // Set the scale width
127+ ctx . lineWidth = lineWidth ;
128+ ctx . stroke ( ) ;
129+ ctx . beginPath ( ) ;
130+ }
131+ }
132+
133+ // Draw the hour hand, hour time, min minutes
134+ function drawHour ( hour , min ) {
135+ // hour * angle between hours-90 degrees (default points to 3 o'clock, 3*30=90) + (percentage of the hour that the minute has passed)
136+ var angle = ( hour * 30 - 90 ) + ( 30 * ( min / 60 ) ) ;
137+ // The angle is converted to radians, and the parameters of cos sin are all radians
138+ var radian = angle * Math . PI / 180 ;
139+ // length
140+ var s = 100 ;
141+ ctx . beginPath ( ) ;
142+ ctx . moveTo ( cx , cy ) ;
143+ ctx . lineTo ( Math . cos ( radian ) * s + cx , Math . sin ( radian ) * s + cy ) ;
144+ ctx . lineWidth = 10 ;
145+ ctx . stroke ( ) ;
146+ }
147+
148+ // draw minute hand
149+ function drawMid ( min , src ) {
150+ // 0 defaults to the 3 o'clock position, the angle between the minute and the minute is 6 degrees, to subtract 15 minutes * 6 degrees, point the minute to 12 o'clock
151+ // (6 * (src / 60)) = seconds have passed, the percentage of this minute * 6 degrees
152+ var angle = ( min * 6 - 15 * 6 ) + ( 6 * ( src / 60 ) ) ;
153+ // The angle is converted to radians, and the parameters of cos sin are all radians
154+ var radian = angle * Math . PI / 180 ;
155+ var s = 180 ; // length
156+ ctx . beginPath ( ) ;
157+ ctx . moveTo ( cx , cy ) ;
158+ ctx . lineTo ( Math . cos ( radian ) * s + cx , Math . sin ( radian ) * s + cy ) ;
159+ ctx . lineWidth = 5 ;
160+ ctx . stroke ( ) ;
161+ }
162+
163+ // draw seconds
164+ function drawSec ( src ) {
165+ var angle = src * 6 - 15 * 6 ; // 0 defaults to the 3 o'clock position, the angle between the minute and the minute is 6 degrees, to subtract 15 minutes * 6 degrees, point the minute to 12 o'clock
166+ var radian = angle * Math . PI / 180 ;
167+ var s = 160 ; // second hand 1 length
168+ var s1 = 50 ; // second hand 2 length
169+
170+ // second hand
171+ ctx . beginPath ( ) ;
172+ ctx . moveTo ( cx , cy ) ;
173+ ctx . lineTo ( Math . cos ( radian ) * s + cx , Math . sin ( radian ) * s + cy ) ;
174+ ctx . lineWidth = 1 ;
175+ ctx . stroke ( ) ;
176+
177+ // second hand red dot
178+ ctx . beginPath ( ) ;
179+ ctx . arc ( Math . cos ( radian ) * s + cx , Math . sin ( radian ) * s + cy , 5 , 0 , Math . PI * 2 ) ;
180+ ctx . fillStyle = "red" ;
181+ ctx . fill ( ) ;
182+
183+ // Reverse (short) second hand
184+ angle = ( src * 6 - 15 * 6 ) + 180 ; // +180 degrees, opposite to the second hand
185+ radian = angle * Math . PI / 180 ;
186+ ctx . beginPath ( ) ;
187+ ctx . moveTo ( cx , cy ) ;
188+ ctx . lineTo ( Math . cos ( radian ) * s1 + cx , Math . sin ( radian ) * s1 + cy ) ;
189+ ctx . lineWidth = 3 ;
190+ ctx . stroke ( ) ;
191+ }
192+
193+ let hr = new XMLHttpRequest ;
194+ let httpCodeSuccess = 200 ;
195+ let xmlHttpRequestCodeDone = 4 ;
196+
197+ function ApiTime ( ) {
198+ // "/API/TIME" /API is a prefix hard-coded into the WebServer class
199+ hr . open ( "GET" , "/API/TIME" , true ) ;
200+ hr . send ( ) ;
201+ hr . onreadystatechange = function ( ) {
202+ if ( this . readyState == xmlHttpRequestCodeDone && this . status == httpCodeSuccess ) {
203+ let vso = JSON . parse ( hr . responseText ) ;
204+ if ( vso != null ) // Can happen using IEv11
205+ {
206+ let value = vso ;
207+ let daysInteger = Math . floor ( value / ( 60 * 60 * 24 ) ) ;
208+ let daysFraction = value - daysInteger * ( 60 * 60 * 24 ) ;
209+ let hoursInteger = Math . floor ( daysFraction / ( 60 * 60 ) ) ;
210+ let hoursFraction = value - hoursInteger * ( 60 * 60 ) ;
211+ let minutesInteger = Math . floor ( hoursFraction / 60 ) ;
212+ let minutesFraction = hoursFraction - ( minutesInteger * 60 ) ;
213+ let secondsInteger = Math . floor ( minutesFraction ) ;
214+
215+ draw ( hoursInteger , minutesInteger , secondsInteger ) ;
216+ }
217+ }
218+ }
219+ }
220+ </ script >
221+ </ html >
0 commit comments