HTML5动态时钟

Author Avatar
Felix 4月 20, 2015

##效果图

##原理
先打上html5中的canvas标签，它定义了一块画布，可以用javascript在上前面做动态效果。
调用浏览器内置对象window的setInterval（animate，delay）方法，可以实现每隔delay时间调用一次自定义的animate方法，从而达到动态的效果。

##代码实现

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/>

##后记
没想到markdown还能支持javascript。这样以后可以通过类似的方法在blog中用js做动态效果了。

expand_less