Html5之Canvas小时钟程序

Posted on
闲来无事，研究了一下 JavaScript 插件的写法，今天就将自己写的一个小插件记录下来。 本文介绍了此款插件的基本用法，实现的功能以及代码。

标签：#javascript, #html5

这一段时间有空在看 Canvas，由于以前开发过 ActionScript 版本的时钟，想着 Canvas 也一定能够实现，所以花了几个小时来调了一下，最终出来了，很是开心，所以在这里记录一下：
首先奉上效果图，虽然比较丑，没有用 CSS 过多的去渲染，这里完成了基本功能
：这里写图片描述
下面是我的目录结构：
这里写图片描述
目录结构很简单，下面看看代码是怎么实现的：
myClock.html:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <script type="text/javascript" src="../scripts/ClockFace.js"></script>
    <script type="text/javascript" src="../scripts/SimpleClock.js"></script>
</head>
<body>
    <canvas id="drawing" width="200" height="200">drgdgd</canvas>
</body>
</html>

模拟时钟类：

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
/**
 * Created by wulin on 2016/12/16.
 * 模拟时钟类。程序入口
 */
window.onload = init;

function init() {
    var simpleClock = new SimpleClock();
    simpleClock.initClock();
}

function SimpleClock() {
    this.face = null;

    this.initClock = function() {
        this.face = new ClockFace(200);

        /*手动初始化*/
        this.face.init();

        /*开始*/
        setInterval(function() {
            this.face.init();
        }.bind(this),1000);
    }
}

钟面实现类：

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/**
 * Created by wulin on 2016/12/16.
 * 钟面实现类
 */

function ClockFace(w) {

    // 圆钟宽高等长
    this.w = w;

    /*设置半径*/
    this.radius = Math.round(this.w / 2);

    /*圆心坐标*/
    this.centerX = this.radius;
    this.centerY = this.radius;
    this.currentTime;

    this.drawing = document.getElementById("drawing");

    this.init = function() {

        if(!this.drawing.getContext) {
            return;
        }

        this.context = this.drawing.getContext("2d");

        //开始路径
        this.context.beginPath();

        //清楚canvas内容
        this.context.clearRect(0,0,200,200);

        /*绘制圆圈*/
        this.drawBorder();

        //变换原点
        this.context.translate(this.centerX, this.centerY);

        /*绘制小时文本*/
        this.drawHourLabels();

        //初始化时间
        this.draw();

        /*绘制 针*/
        this.createHands();

        //描边路径
        this.context.stroke();

        //变换原点
        this.context.translate(-100, -100);
        this.context.closePath();
    };

    this.draw = function() {

        this.currentTime = new Date();
        this.showTime(this.currentTime);

    };

    //绘制圆圈
    this.drawBorder = function() {
        //绘制外圆
        this.context.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false);

        //绘制内圆
        this.context.moveTo(this.w - 6, this.centerY);
        this.context.arc(this.centerX, this.centerY, this.radius - 6, 0, 2 * Math.PI, false);


    };

    //绘制小时文本
    this.drawHourLabels = function() {
        for(var i=1; i <= 12; i++) {

            /*夹角角度(弧度)*/
            var angleInRadians = i * 30 * (Math.PI/180);

            //显示位置
            var x =  0.8 * this.radius * Math.sin(angleInRadians);
            var y = -(0.8 * this.radius * Math.cos(angleInRadians));

            //设置文本样式
            this.context.font = "bold 14px Arial";
            this.context.textAlign = "center";
            this.context.textBaseline = "middle";
            this.context.fillText(i.toString(), x, y);
        }
    };

    this.createHands = function() {

        //时针
        var hourX =  0.5 * this.radius * Math.sin(this.hourHandRotation);
        var houurY = -(0.5 * this.radius * Math.cos(this.hourHandRotation));
        this.drawHand(hourX, houurY);

        /**
         * 分针*/
        var minuteX =  0.65 * this.radius * Math.sin(this.minuteHandRotation);
        var minuteY = -(0.65 * this.radius * Math.cos(this.minuteHandRotation));
        this.drawHand(minuteX, minuteY);

        /**
         * 秒针*/
        var secondX =  0.75 * this.radius * Math.sin(this.secondHandRotation);
        var secondY = -(0.75 * this.radius * Math.cos(this.secondHandRotation));
        this.drawHand(secondX, secondY);
    };

    this.drawHand = function(x, y) {

        console.log(x + "," +  y);
        this.context.moveTo(0, 0);
        this.context.lineTo(x, y);
    };

    /**
     * 显示时间；
     * @param time
     */
    this.showTime = function(time) {
        /**
         * 截取时间段*/
        var seconds = time.getSeconds();
        var minutes = time.getMinutes();
        var hours = time.getHours();

        /**
         * 钟面初始时，时针、分针以及秒针都指向6点；
         * 如果设置this.secondHandRotation = 90;就表示此时秒针顺时针转90度；*/
        this.secondHandRotation = (seconds*6) * (Math.PI/180);    // 可以算出1秒6度；
        this.minuteHandRotation = (minutes*6) * (Math.PI/180);    // 同上，1分6度；
        this.hourHandRotation = ((hours*30) + (minutes*0.5)) * (Math.PI/180);    //知道，1小时30度，那1分就是60分之30度，即1分时时钟转动0.5度；
    }
}

canvas 版本的时钟是参照前一篇文章Flex 版本时钟
来开发的。大致的思路和结构都差不多，在这里我没有用 canvas 的 roate()旋转方法实现，效率较 roate 方法相对来说比较低下一点，改日奉上 roate 的使用方法。还有些文章的时间比较仓促，代码写完也没来得及过多的优化，不足之处还请见谅。

友情提示：请尊重作者劳动成果，如需转载本博客文章请注明出处！谢谢合作！

【作者：吴林  https://super-lin0.github.io/】