利用html5的canvas api可以完成我们以前意想不到的动画效果，以前我们想在网页上放置一个时钟，需要先用flash工具制作一个钟表，并写上复杂的javascript代码，然后载入到页面中。而html5的到来，我们可以直接在页面中使用canvas标签并配合javascript就可以完成一个漂亮的时钟。
今天，我们一起来使用html5制作一个指针会走动的时钟。
html
我们只需要在html中放置一个canvas标签：#clock，宽度和高度都是400px。
[html] view plaincopy
nbsp;html>            html5应用之时钟                     
javascript
我们先来获取当前时间：包括时分秒，确保在打开页面时能定位指针位置，并且定义好圆点坐标和秒钟角度变量。
[js] view plaincopy
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分钟。
[js] view plaincopy
function draw(){       var c=document.getelementbyid(clock);       var ctx=c.getcontext(2d); //获取绘图对象       ctx.clearrect(0,0,c.width,c.height); //清除上次绘制的图形       s++;//秒针           ctx.fillstyle = '#fff' //填充白色背景色        ctx.fillrect(0,0,c.width,c.height);   //设置画布区域           ctx.save(); //保存当前绘图状态           // 时间刻度       for(var i=0;i         var angle=(math.pi*2)/12; //获得每个刻度对应的弧度           ctx.beginpath();//开始绘制           ctx.font=12px arial; //设置字体           if(i==0||i==3||i==6||i==9){ //当指向0（12点）、3点、6点、9点时                ctx.fillstyle=red; //刻度为红色                radius=4; //刻度半径长4px           }else{                ctx.fillstyle=blue; //刻度为蓝色                radius=3; //刻度半径长为3px           }               ctx.arc(x,y-100,radius,0,math.pi*2,true); //画圆作为刻度           ctx.fill(); //填充路径           transform(ctx,x,y,angle,true);  //刻度分布                     }       ctx.restore(); //恢复上次保存的绘图状态       ...   }  
按照上面的代码可以绘制一个带刻度的圆盘作为时钟的表盘。接下来我们继续在函数draw()里写时分秒指针的转动。
[js] view plaincopy
function draw(){       ...       sangle=(math.pi*2)/60*s; //秒度       //时针转动       ctx.save();        ctx.strokestyle=red;       ctx.linewidth=3;       transform(ctx,x,y,(math.pi*2)/60*h);        sj(ctx,x,y,y-40);       ctx.restore();              //分针转动       ctx.save();       ctx.strokestyle=blue;       ctx.linewidth=2;       transform(ctx,x,y,(math.pi*2)/60*m);        sj(ctx,x,y,y-68);       ctx.restore();           //秒针转动       ctx.save();       ctx.strokestyle=#000;       transform(ctx,x,y,sangle);         sj(ctx,x,y,y-80);       ctx.restore();              //数据整理       if(s%60==0){           sangle=0,s=0,m++;           if(m%12==0){ //每十二分 时针旋转一次               if(m!=0)h++;               if(m%60==0)m=0;           }           if(h%60==0)h=0;        }   }  
每调用一次draw(),我们对时分秒针设置不同的填充颜色和指针粗细，绘制指针，根据弧度转动指针位置，其中我们调用了自定义函数trans()和pointer()。
函数pointer()用来绘制指针。其中ctx表示canvas对象，x,y是圆点坐标，z是指针头的位置。
[js] view plaincopy
function pointer(ctx,x,y,z){        ctx.beginpath();        ctx.moveto(x,y);        ctx.lineto(x,z);        ctx.stroke();        ctx.fill();   }  
函数transform()用来旋转指针。其中ctx表示canvas对象，x,y是圆点坐标，angle是转动角度。
[js] view plaincopy
function trans(ctx,x,y,angle){        ctx.transform(math.cos(angle), math.sin(angle),            -math.sin(angle), math.cos(angle),            x*(1-math.cos(angle)) + x*math.sin(angle),            y*(1-math.cos(angle)) - y*math.sin(angle))   }  
最后，我们设置每隔1秒钟（即1000毫秒）执行一次draw()。
[js] view plaincopy
setinterval(draw(),1000);