• 代码素材首页
  • 欢迎您,游客!您可以选择 注册
    头像

    HTML5应用之时钟

    来源:http://school.sxbd100.com/html5/35.html 代码交流管理员 2016-09-13浏览(947)

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

    万博彩票下载最新版本员,你不是一个人;网站开发QQ群:136483411  在线充值,或联系QQ 304534221直接充值

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

    手机扫码访问:

    下载资源 下载积分: 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是指针头的位置。


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

    评论(0)


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

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