cclock v1.3.1

#cClock

A flat and dynamic clock by Canvas

##Index

• Quick start
• Options
• Attentions
• License

##中文说明

• 使用说明
• 配置参数
• 注意事项
• 开源协议

##Index

###Quick start

###Install by npm or bower

$ npm install cclock

$ bower install cclock

###Include files

<script src="cClock.js"></script>

Apply cClock and call the function as simple as

<canvas id="cClock" width="400" height="400">A flat and dynamic clock.</canvas>

cClock({
    id: 'cClock'
});

All done !

###Options

The cClock has awesome and customizable feature.

cClock({
    id: 'cClock',
    options: {
        option1: value1,
        option2: value2,
        ...
    },
    showTime: {
        hour: hour,
        minute: minute,
        second: second
    }
});

The Parameters are :

1. cClock's id, should be String.

2. A object to custom cClock including available options which are listed below. A null object means default options.

3. Optional, a object to make the cClock at including time. Also can be true to make it at default time which is 10 : 08 : 30.

###Attentions

1. The width and height of cClock depend on <canvas>.

2. So assign the width and height in this tag and make sure the tag is a square which means width equal height !

3. The length of some options should be assigned decimal, which means "decimal times the radius length".

4. If the length or width of one option equal 0, the option will not display.

5. For example, if "secondLength: 0", then there is no second hand.

6. There will be no minute dial if there is no hour dial.

###License

MIT License

##中文说明

###使用说明

###通过 npm 或 bower 安装

$ npm install jzoom

$ bower install cclock

###引入文件

<script src="cClock.js"></script>

添加 <canvas> 标签，设置宽高，并在标签内部添加一些描述，

<canvas id="cClock" width="400" height="400">A flat and dynamic clock.</canvas>

运行函数，

cClock({
    id: 'cClock'
});

即可实现默认效果。

###配置选项

cClock 拥有丰富的自定义功能。

cClock({
    id: 'cClock',
    options: {
        option1: value1,
        option2: value2,
        ...
    },
    showTime: {
        hour: hour,
        minute: minute,
        second: second
    }
});

参数分别为：

1. cClock 标签的 id 属性， String 类型。

2. 自定义 cClock 外观的配置对象，可选参数列于下表，空对象表示默认效果。

3. 可选，传入一个时间对象，可使 cClock 静止在设置的时间，也可传入 true 使之静止在默认时间 —— 10 : 08 : 30。

###注意事项

1. 时钟的大小取决于 <canvas> 的宽高。

2. 必须要给该标签设置宽高，并且保证是一个正方形，也就是宽高要相等。

3. 一些与长度有关的选项需设置为小数，与时钟半径有关。

4. 如果选项的长度或宽度设置为 0 ，则表示不显示该选项有关的内容。

5. 例如，如果设置 "secondLength: 0" ，就表示不需要秒针。

6. 如果把小时刻度设置为不显示，那么分钟刻度也不会显示。

##开源协议

基于 MIT 协议。