-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvasclock.html
67 lines (53 loc) · 2 KB
/
canvasclock.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
<!DOCTYPE html>
<html>
<head>
<title>The day in hex colors</title>
<style>
html, body {
height: 100%; margin: 0; padding: 0;
overflow: hidden;
}
#canvas {
position: absolute;
width: 100%; height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" width="360" height="240"></canvas>
<script>
var maxHex = 0xFF;
var fill = function(x) { return ((""+x).length == 2) ? x : ("0"+x); };
var hexify = function(x) { return fill(parseInt((x*maxHex).toFixed(0)).toString(16)); };
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasData = ctx.createImageData(canvas.width, canvas.height);
var hours = 0;
var minutes = 0;
var seconds = 0;
var draw = function () {
//var hex = "#" + hexify(hours/23) + hexify(minutes/59) + hexify((seconds)/59);
while (hours < 24) {
var x = hours%6 * 60 + seconds;
var y = Math.floor(hours/6) * 60 + minutes;
var idx = (x + y * canvas.width) * 4;
canvasData.data[idx + 0] = Math.floor((hours/23) * 255);
canvasData.data[idx + 1] = Math.floor((minutes/59) * 255);
canvasData.data[idx + 2] = Math.floor((seconds/59) * 255);
canvasData.data[idx + 3] = 255;
seconds++;
if (seconds == 60) {
seconds = 0;
minutes++;
}
if (minutes == 60) {
minutes = 0;
hours++;
}
}
ctx.putImageData(canvasData, 0, 0);
};
draw();
</script>
</body>
</html>