使用HTML5制作时钟

来源:互联网 时间:1970-01-01

之前看到别人用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>

 这是时钟效果:


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


相关阅读:
Top