canvas ---个性时钟

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <title></title>
 <style>
     *{
         padding:;
         margin:;
     }
     html,body{
         width:%;
         height:%;
         overflow: hidden;
         background: #;
     }
     canvas{
         background:#fff;
     }
     span{
         font-size: 50px;
     }
 </style>
 <script>
 function d2a(n){
     n-=;
     return n*Math.PI/;
 }
 window.onload=function(){
     var c=document.getElementsByTagName('canvas')[];
     var str='时钟';
     //准备画笔
     var gd=c.getContext('2d');
     gd.lineWidth=;

     function drawArc(start,end,r,color){
         gd.beginPath();
         gd.strokeStyle=color;
         gd.arc(,,r,d2a(start),d2a(end),false);
         gd.stroke();
     }
     function clock(){
         gd.clearRect(,,c.width,c.height)
         var oDate=new Date();
         var h=oDate.getHours();
         var m=oDate.getMinutes();
         var s=oDate.getSeconds();
         var ms=oDate.getMilliseconds();
         //秒
         drawArc(,s*+ms/*,,'red');
         //分
         drawArc(,m*,,'blue');
         //时
         drawArc(,h%*,,'green');
         //画字
         gd.font='50px a';
         gd.textAlign='center';
         gd.textBaseline='bottom';
         gd.fillText(str,,);

         gd.font='20px a';
         gd.fillText(h+':'+m+':'+s,,);
     }

     setInterval(clock,)
     clock();
 };
 </script>
 </head>
 <body>
 <canvas width="" height="">
     <span>你的浏览器不支持canvas</span>
 </canvas>
 </body>
 </html>