-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (122 loc) · 4.68 KB
/
index.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
<!DOCTYPE html>
<html>
<header></header>
<body>
<canvas id="example" width="300" height="300">The <canvas> element is not supported by your browser!</canvas>
<script type="application/x-javascript">
draw();
function draw() {
var canvas = document.getElementById('example');
if (canvas.getContext) {
var c2d=canvas.getContext('2d');
c2d.clearRect(0,0,300,300);
//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="Bold 20px Arial";
c2d.textBaseline="middle";
c2d.textAlign="center";
c2d.lineWidth=1;
c2d.save();
//Outer bezel
c2d.strokeStyle=grad1;
c2d.lineWidth=10;
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=10;
c2d.beginPath();
c2d.arc(150,150,129,0,Math.PI*2,true);
c2d.stroke();
c2d.strokeStyle="#222";
c2d.save();
c2d.translate(150,150);
//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=8;
sx=sang*95;
sy=cang*-95;
ex=sang*120;
ey=cang*-120;
nx=sang*80;
ny=cang*-80;
c2d.fillText(i/5,nx,ny);
//Else this is a minute marker
} else {
c2d.lineWidth=2;
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.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
c2d.rotate(Math.PI/6*(hrs+(min/60)+(sec/3600)));
c2d.beginPath();
c2d.moveTo(0,10);
c2d.lineTo(0,-60);
c2d.stroke();
c2d.restore();
c2d.save();
//Draw minute hand
c2d.rotate(Math.PI/30*(min+(sec/60)));
c2d.beginPath();
c2d.moveTo(0,20);
c2d.lineTo(0,-110);
c2d.stroke();
c2d.restore();
c2d.save();
//Draw second hand
c2d.rotate(Math.PI/30*sec);
c2d.strokeStyle="#E33";
c2d.beginPath();
c2d.moveTo(0,20);
c2d.lineTo(0,-110);
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>
</body>
</html>