之前看到别人用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>
这是时钟效果：
外观不太好看，如果对色彩比较敏感的话，可以自己修改代码，制作出好看的时钟。