代码改变世界

使用HTML5制作时钟

2014-04-09 22:53  那时候的我  阅读(2298)  评论(0)  编辑  收藏  举报

之前看到别人用HTML5制作时钟，自己也写了一个，这是很久以前写的了，没有注释，现在自己看都晕了(注释的重要性就体现在这边了)，找时间加上注释，让自己和别人都比较好理解。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>html5时钟</title>
 5 </head>
 6 <body>
 7     <canvas id = "canvas"></canvas>
 8 
 9     <script>
10         var Clock = function (canvas, options) {
11             this.canvas = canvas;
12             this.ctx = this.canvas.getContext("2d");
13             this.options = options;
14         };
15 
16         Clock.prototype = {
17             constructor: Clock,
18             drawCircle: function () {
19                 var ctx = this.ctx;
20                 ctx.strokeStyle = "black";
21                 ctx.arc(this.canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * Math.PI, false);
22                 ctx.stroke();
23             },
24             drawNum: function () {
25                 var ctx = this.ctx;
26                 var angle = Math.PI * 2 / 12;
27                 for (var i = 1; i <= 12; i += 1) {
28                     ctx.font = "20px Georgia";
29                     ctx.textAlign = "center";
30                     ctx.textBaseline = 'middle';
31                     ctx.fillText(String(i), this.canvas.width / 2 + Math.cos(3 *Math.PI / 2 + angle * i) * 40, this.canvas.height / 2 + Math.sin(3 * Math.PI / 2 + angle * i) * 40);
32                 }
33             },
34             drawPointer: function () {
35                 var ctx = this.ctx;
36                 var that = this;
37                 var date, hour, minute, second;
38                 date = new Date();
39                 hour = date.getHours();
40                 if (hour > 12) {
41                     hour = hour % 12;
42                 }
43                 minute = date.getMinutes();
44                 second = date.getSeconds();
45 
46                 var b = minute * Math.PI / 30;
47                 var c = second * Math.PI / 30;
48                 var a = hour * Math.PI / 6 + Math.PI / 6 * minute / 60;
49                 var minuteAngle = Math.PI * 2 / 3600;
50                 var secondAngle = Math.PI * 2 / 60;
51                 var hourAngle = Math.PI * 2 / 12 / 3600;
52 
53                 ctx.beginPath();
54                 ctx.save();
55                 ctx.translate(that.canvas.width / 2, that.canvas.height / 2);
56                 ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
57                 ctx.fill();
58                 ctx.closePath();
59                 ctx.beginPath();
60                 a += hourAngle;
61                 ctx.rotate(a);
62                 ctx.fillRect(-2, -22, 4, 30);
63                 ctx.closePath();
64                 ctx.beginPath();
65                 b += minuteAngle;
66                 ctx.rotate(b - a);
67                 ctx.fillRect(-1.5, -26, 3, 35);
68                 ctx.closePath();
69                 ctx.beginPath();
70                 c += secondAngle;
71                 ctx.rotate(c - b);
72                 ctx.fillRect(-1, -30, 2, 40);
73                 ctx.closePath();
74                 ctx.restore();
75             },
76             rePaint: function () {
77                 this.drawPointer();
78                 this.drawCircle();
79                 this.drawNum();
80             },
81             tik: function () {
82                 var that = this;
83                 var ctx = this.ctx;
84                 this.rePaint();
85                 window.timer = setInterval(function () {
86                     ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);
87                     that.rePaint();
88                 }, 1000);
89             }
90         };
91 
92         var options;
93         var clock = new Clock(document.getElementById("canvas"), options);
94         clock.tik();
95     </script>
96 </body>
97 </html>

 这是时钟效果：

外观不太好看，如果对色彩比较敏感的话，可以自己修改代码，制作出好看的时钟。