-
Notifications
You must be signed in to change notification settings - Fork 0
/
infinite-clock.html
80 lines (64 loc) · 1.74 KB
/
infinite-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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<style>
body {
text-align: center;
margin-top: 3em;
}
input {
width: 30px
}
</style>
</head>
<body>
<canvas id="analogClock" width="265" height="265">Clock</canvas><br>
Depth: <input id="depth" value="3" max="4" min="0" type="number">
<script>
var canvas = document.getElementById("analogClock");
var ctx = canvas.getContext("2d");
ctx.translate(canvas.width / 2, canvas.height / 2);
var maxLevel = +depth.value-1;
depth.onchange = function () {
maxLevel = Math.min(4,this.value-1);
render()
};
function clock(level, hours, minutes, radius, thickness) {
ctx.beginPath();
ctx.arc(0, 0, thickness, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
ctx.lineWidth = thickness;
draw(radius / 3, hours * 30);
draw(radius / 2, minutes * 6);
for (var i = 12; i > 0; i--) {
ctx.save();
var angle = (i * 30) * Math.PI / 180;
ctx.rotate(angle);
ctx.translate(0, -radius / 2);
ctx.rotate(-angle);
if (level <= maxLevel) clock(level + 1, i, 0, radius / 4, thickness / 2);
ctx.restore();
}
function draw(length, angle) {
ctx.save(); // save restore it probly killin perf, todo just reset the transformation
ctx.beginPath();
ctx.rotate((angle - 180) * Math.PI / 180);
ctx.moveTo(0, 0);
ctx.lineTo(0, length);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
}
function render(){
var date = new Date();
ctx.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
clock(0, date.getHours(), date.getMinutes(), 200, 4);
}
render()
</script>
</body>
</html>