头像

HTML5应用之时钟

来源:http://www.daimasucai.com/html5/35.html 代码素材管理员 2016-09-13浏览()

利用HTML5的Canvas API可以完成我们以前意想不到的动画效果,以前我们想在网页上放置一个时钟,需要先用flash工具制作一个钟表,并写上复杂的ActionScript代码,然后载入到页面中。而HTML5的到来,我们可以直接在页面中使用canvas标签并配合javascript就可以完成一个漂亮的时钟。

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

HTML5应用之时钟
分类:首页>>网页特效>>html5 阅读次数:
查看演示 下载次数: 11

手机扫码访问:

下载资源 下载积分: 0

  HTML

  我们只需要在html中放置一个canvas标签:#clock,宽度和高度都是400px。

    <canvas id="clock" width="400" height="400"></canvas>  

  Javascript

  我们先来获取当前时间:包括时分秒,确保在打开页面时能定位指针位置,并且定义好圆点坐标和秒钟角度变量。

    var time = new Date(); 

    var h = time.getHours(); //时 

    var m = time.getMinutes(); //分 

    var s = time.getSeconds(); //秒 

    h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置 

    var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量 

  接下来,我们利用canvas来绘制时钟,我们写一个函数draw(),绘制刻度,执行该函数一次,则秒针顺时针走动1/60个圆弧度。

  首先,获取canvas绘图对象,绘制时钟刻度。我们将时钟(圆)划分为12个刻度,即每个刻度代表一个钟头,当然,你也可以划分为60个刻度,这样每个刻度就代表1分钟。

  每调用一次draw(),我们对时分秒针设置不同的填充颜色和指针粗细,绘制指针,根据弧度转动指针位置,其中我们调用了自定义函数trans()和pointer()。

  函数pointer()用来绘制指针。其中ctx表示canvas对象,x,y是圆点坐标,z是指针头的位置。


声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:http://www.daimasucai.com/html5/35.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>