-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path1-clock.html
81 lines (68 loc) · 2.13 KB
/
1-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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clock</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
MARGIN = 50,
FONT_HEIGHT = 15;
HAND_TURNCATION = canvas.width / 25,
HOUR_HAND_TURNCATION = canvas.width / 10,
NUMERAL_SPACING = 20,
RADIUS = canvas.width / 2 - MARGIN,
HAND_RADIUS = RADIUS + NUMERAL_SPACING;
function drawCircle() {
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
context.stroke();
}
function drawCenter() {
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
context.fill();
}
function drawHand(loc, isHour) {
var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
handRadius = isHour ? RADIUS - HAND_TURNCATION - HOUR_HAND_TURNCATION : RADIUS - HAND_TURNCATION;
context.moveTo(canvas.width / 2, canvas.height / 2);
context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius,
canvas.height / 2 + Math.sin(angle) * handRadius);
context.stroke();
}
function drawNumberals() {
var angle = 0,
numberalWidth = 0;
for(var i = 1; i <= 12; i++) {
var numberal = i;
angle = Math.PI / 6 * (numberal - 3);
numberalWidth = context.measureText(numberal).width;
context.fillText(numberal, canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) - numberalWidth / 2,
canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) + FONT_HEIGHT / 2);
context.stroke();
}
}
function drawHands() {
var date = new Date,
hour = date.getHours();
hour = hour > 12 ? hour - 12 : hour;
drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);
drawHand(date.getMinutes(), false, 0.5);
drawHand(date.getSeconds(), false, 0.2);
drawNumberals();
}
function drawClock() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawCircle();
drawCenter();
drawHands();
}
context.font = FONT_HEIGHT + 'px Arail';
setInterval(drawClock, 1000)
</script>
</body>
</html>