利用html5制作一个时钟动画

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

  1 var clock=document.getElementById("clock");
  2     var cxt=clock.getContext("2d");
  3 function drawNow(){
  4     var now=new Date();
  5     var hour=now.getHours();
  6     var min=now.getMinutes();
  7     var sec=now.getSeconds();
  8     hour=hour>12?hour-12:hour;
  9     hour=hour+min/60;
 10     //表盘(蓝色)
 11     cxt.lineWidth=10;
 12     cxt.strokeStyle="blue"
 13     cxt.beginPath();
 14     cxt.arc(250,250,200,0,360,false);
 15     cxt.closePath();
 16     cxt.stroke();
 17     //刻度
 18     //时刻度
 19     for(var i=0;i<12;i++){
 20         cxt.save();
 21         cxt.lineWidth=7;
 22         cxt.strokeStyle="black";
 23         cxt.translate(250,250);
 24         cxt.rotate(i*30*Math.PI/180);//旋转角度  角度*Math.PI/180=弧度
 25         cxt.beginPath();
 26         cxt.moveTo(0,-170);
 27         cxt.lineTo(0,-190);
 28         cxt.closePath();
 29         cxt.stroke();
 30         cxt.restore();
 31     }
 32     //分刻度
 33     for(var i=0;i<60;i++){
 34         cxt.save();
 35         //设置分刻度的粗细
 36         cxt.lineWidth=5;
 37         //重置画布原点
 38         cxt.translate(250,250);
 39         //设置旋转角度
 40         cxt.rotate(i*6*Math.PI/180);
 41         //画分针刻度
 42         cxt.strokeStyle="black";
 43         cxt.beginPath();
 44         cxt.moveTo(0,-180);
 45         cxt.lineTo(0,-190);
 46         cxt.closePath();
 47         cxt.stroke();
 48         cxt.restore();
 49     }
 50 
 51     //时针
 52     cxt.save();
 53     // 设置时针风格
 54     cxt.lineWidth=7;
 55     cxt.strokeStyle="black";
 56     cxt.translate(250,250);
 57     cxt.rotate(hour*30*Math.PI/180);
 58     cxt.beginPath();
 59     cxt.moveTo(0,-140);
 60     cxt.lineTo(0,10);
 61     cxt.closePath();
 62     cxt.stroke();
 63     cxt.restore();
 64     //分针
 65     cxt.save();
 66     cxt.lineWidth=5;
 67     cxt.strokeStyle="black";
 68     //设置异次元空间分针画布的中心
 69     cxt.translate(250,250);
 70     cxt.rotate(min*6*Math.PI/180);
 71     cxt.beginPath();
 72     cxt.moveTo(0,-160);
 73     cxt.lineTo(0,15);
 74     cxt.closePath();
 75     cxt.stroke()
 76     cxt.restore();
 77 
 78     //秒针
 79     cxt.save();
 80     //设置秒针的风格
 81     //颜色:红色
 82     cxt.strokeStyle="red";
 83     cxt.lineWidth=3;
 84     //重置原点
 85     cxt.translate(250,250);
 86     //设置角度
 87     //cxt.rotate(330*Math.PI/180);
 88     cxt.rotate(sec*6*Math.PI/180);
 89 
 90     cxt.beginPath();
 91     cxt.moveTo(0,-170);
 92     cxt.lineTo(0,20);
 93     cxt.closePath();
 94     cxt.stroke();
 95     //画出时针,分针,秒针的交叉点
 96     cxt.beginPath();
 97     cxt.arc(0,0,5,0,360,false);
 98     cxt.closePath();
 99     //设置填充
100     cxt.fillStyle="gray";
101     cxt.fill();
102     //cxt.strokeStyle="red";
103     cxt.stroke();
104 
105     //画出秒针的小圆点
106     cxt.beginPath();
107     cxt.arc(0,-140,5,0,360,false);
108     cxt.closePath();
109     //设置填充
110     cxt.fillStyle="gray";
111     cxt.fill();
112     //cxt.strokeStyle="red";
113     cxt.stroke();
114 
115 
116     cxt.restore();
117 
118 
119 
120 }
121 function drawClock(){
122     cxt.clearRect(0,0,500,500);
123     drawNow();
124 }
125     drawNow();
126     setInterval(drawClock,1000);