HTML5应用之时钟

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

程序员，你不是一个人；网站开发QQ群：136483411  在线充值，或联系QQ 304534221直接充值

查看演示 下载次数： 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是指针头的位置。