HTML5动态时钟
##效果图
##原理
先打上html5中的canvas标签，它定义了一块画布，可以用javascript在上前面做动态效果。
调用浏览器内置对象window的setInterval（animate，delay）方法，可以实现每隔delay时间调用一次自定义的animate方法，从而达到动态的效果。
##代码实现
##后记
没想到markdown还能支持javascript。这样以后可以通过类似的方法在blog中用js做动态效果了。
Felix
4月 20, 2015
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
<body>
<canvas id="mycanvas" width="500" height="500" style="background: #B0D141"></canvas>
<script>
var mycanvas = document.getElementById("mycanvas");
var context = mycanvas.getContext("2d");
function drawClock() {
//每次调用函数都要对指定区域清屏
context.clearRect(0, 0, 500, 500);
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = (hour >= 12) ? hour - 12 : hour;
hour = hour + min / 60;
min = min + sec / 60;
//画圆
context.lineWidth=10;
context.strokeStyle='#000';
context.beginPath();
context.arc(250, 250, 200, 0, 360, false);
context.closePath();
context.stroke();
//画时刻度
for (var i = 0; i < 12; i++) {
context.save();
context.strokeStyle='black';
context.beginPath();
context.translate(250, 250);
context.rotate(i * 30 * Math.PI / 180);
context.beginPath();
context.moveTo(0, -190);
context.lineTo(0, -170);
context.closePath();
context.stroke();
context.restore();
}
//画分刻度
context.beginPath();
for (var i = 0; i < 60; i++) {
context.save();
context.strokeStyle='black';
context.beginPath();
context.translate(250, 250);
context.rotate(i * 6 * Math.PI / 180);
context.moveTo(0, -190);
context.lineTo(0, -180);
context.closePath();
context.stroke();
context.restore();
}
//画时针
context.save();
context.lineWidth=12;
context.beginPath();
context.translate(250, 250);
context.rotate(hour * Math.PI * 30 / 180);
context.moveTo(0, -135);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
//画分针
context.save();
context.lineWidth=8;
context.beginPath();
context.translate(250, 250);
context.rotate(min * Math.PI * 6 / 180);
context.moveTo(0, -160);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
//画秒针
context.save();
context.lineWidth=5;
context.strokeStyle='red';
context.beginPath();
context.translate(250, 250);
context.rotate(sec * Math.PI * 6 / 180);
context.moveTo(0, -182);
context.lineTo(0, 16);
context.closePath();
context.stroke();
context.restore();
}
setInterval(drawClock, 1000);
</script>
<body/>