html5 canvas超逼真的模拟时钟特效
简要教程
thooclock是一款效果非常逼真的html5 canvas模拟时钟特效。该时钟特效使用jquery和html5 canvas api来制作，模拟现实生活中的时钟。并且它还具有定时闹钟的功能。
使用方法
使用该模拟时钟插件首先需要引入jquery和jquery.thooclock.js文件。
<script type="text/javascript" src="js/jquery-latest.min.js"></script> <script type="text/javascript" src="js/jquery.thooclock.js"></script>
html结构
可以使用一个空的<p>来作为时钟的容器。
<p id="myclock"></p>
初始化插件
在页面dom元素加载完毕之后，可以通过thooclock()方法来初始化该时钟插件。
<script type="text/javascript"> $('#mydiv').thooclock(); </script>
配置参数
下面是该时钟插件的可用配置参数：
size：默认值：250。时钟的大小。
dialcolor：默认值：'#000000'。时钟的前景色。可以是hex，颜色关键字，rgb或rgba颜色值。
dialbackgroundcolor：默认值：'transparent'。时钟的背景颜色。
secondhandcolor：默认值：'#f3a829'。时钟秒针的颜色。
minutehandcolor：默认值：'#222222'。时钟分针的颜色。
hourhandcolor：默认值：'#222222'。时钟时针的颜色。
alarmhandcolor：默认值：'#ffffff'。闹钟指示的颜色（闹钟指示只有在alarmtime设置为'hh:mm'）时才可见。
alarmhandtipcolor：默认值：'#026729'。闹钟指示的提示框颜色。
hourcorrection：默认值：'+0'。小时校正。例如：+5或-3。
alarmcount：默认值：1。闹钟会响多少次。
alarmtime：响闹钟的时间。可以是date对象或字符串：hh，hh:mm，hh:mm:ss。
shownumerals：是否在时钟上显示数字。
brandtext：时钟的品牌名称。
brandtext2：时钟的产地名称。
onalarm：闹钟的回调函数。
offalarm：闹钟结束时的回调函数。
oneverysecond：这个函数会在每一秒都触发一次。
方法
设置闹钟时间
可以使用一个字符串来设置闹钟时间：
// must be "hh", "hh:mm" or "hh:mm:ss" var strtime = '14:25' $.fn.thooclock.setalarm(strtime);
也可以使用一个date对象来设置闹钟时间：
var alarm_date=new date(); alarm_date.sethours(8,19,30); $.fn.thooclock.setalarm(alarm_date);
清除闹钟
$.fn.thooclock.clearalarm();
以上就是html5 canvas超逼真的模拟时钟特效的内容。