利用html5制作一个时钟动画

 <canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas>

 var clock=document.getElementById("clock");
     var cxt=clock.getContext("2d");
 function drawNow(){
     var now=new Date();
     var hour=now.getHours();
     var min=now.getMinutes();
     var sec=now.getSeconds();
     hour=hour>12?hour-12:hour;
     hour=hour+min/60;
     //表盘(蓝色)
     cxt.lineWidth=10;
     cxt.strokeStyle="blue"
     cxt.beginPath();
     cxt.arc(250,250,200,0,360,false);
     cxt.closePath();
     cxt.stroke();
     //刻度
     //时刻度
     for(var i=0;i<12;i++){
         cxt.save();
         cxt.lineWidth=7;
         cxt.strokeStyle="black";
         cxt.translate(250,250);
         cxt.rotate(i*30*Math.PI/180);//旋转角度  角度*Math.PI/180=弧度
         cxt.beginPath();
         cxt.moveTo(0,-170);
         cxt.lineTo(0,-190);
         cxt.closePath();
         cxt.stroke();
         cxt.restore();
     }
     //分刻度
     for(var i=0;i<60;i++){
         cxt.save();
         //设置分刻度的粗细
         cxt.lineWidth=5;
         //重置画布原点
         cxt.translate(250,250);
         //设置旋转角度
         cxt.rotate(i*6*Math.PI/180);
         //画分针刻度
         cxt.strokeStyle="black";
         cxt.beginPath();
         cxt.moveTo(0,-180);
         cxt.lineTo(0,-190);
         cxt.closePath();
         cxt.stroke();
         cxt.restore();
     }

     //时针
     cxt.save();
     // 设置时针风格
     cxt.lineWidth=7;
     cxt.strokeStyle="black";
     cxt.translate(250,250);
     cxt.rotate(hour*30*Math.PI/180);
     cxt.beginPath();
     cxt.moveTo(0,-140);
     cxt.lineTo(0,10);
     cxt.closePath();
     cxt.stroke();
     cxt.restore();
     //分针
     cxt.save();
     cxt.lineWidth=5;
     cxt.strokeStyle="black";
     //设置异次元空间分针画布的中心
     cxt.translate(250,250);
     cxt.rotate(min*6*Math.PI/180);
     cxt.beginPath();
     cxt.moveTo(0,-160);
     cxt.lineTo(0,15);
     cxt.closePath();
     cxt.stroke()
     cxt.restore();

     //秒针
     cxt.save();
     //设置秒针的风格
     //颜色:红色
     cxt.strokeStyle="red";
     cxt.lineWidth=3;
     //重置原点
     cxt.translate(250,250);
     //设置角度
     //cxt.rotate(330*Math.PI/180);
     cxt.rotate(sec*6*Math.PI/180);

     cxt.beginPath();
     cxt.moveTo(0,-170);
     cxt.lineTo(0,20);
     cxt.closePath();
     cxt.stroke();
     //画出时针,分针,秒针的交叉点
     cxt.beginPath();
     cxt.arc(0,0,5,0,360,false);
     cxt.closePath();
     //设置填充
     cxt.fillStyle="gray";
     cxt.fill();
     //cxt.strokeStyle="red";
     cxt.stroke();

     //画出秒针的小圆点
     cxt.beginPath();
     cxt.arc(0,-140,5,0,360,false);
     cxt.closePath();
     //设置填充
     cxt.fillStyle="gray";
     cxt.fill();
     //cxt.strokeStyle="red";
     cxt.stroke();

     cxt.restore();

 }
 function drawClock(){
     cxt.clearRect(0,0,500,500);
     drawNow();
 }
     drawNow();
     setInterval(drawClock,1000);