H5-时钟

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *
  8         {
  9             margin: 0;
 10             padding: 0;
 11         }
 12         #box
 13         {
 14             width: 500px;
 15             height: 500px;
 16             margin: 0 auto;
 17             position: relative;
 18         }
 19         #cas
 20         {
 21             /*background: #ccc;*/
 22         }
 23         #time2
 24         {
 25             color: red;
 26             background: black;
 27             position: absolute;
 28             bottom: 36%;
 29             left: 35%;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34 <div id="box">
 35     <canvas width="400" height="400" id="cas"></canvas>
 36     <div id="time2"></div>
 37 </div>
 38 <script >
 39     var cas=document.getElementById('cas');
 40     var ctx=cas.getContext('2d');
 41     var time2=document.getElementById('time2');
 42     function clock () {
 43         ctx.beginPath();
 44         ctx.arc(200,200,190,0,2*Math.PI,false);
 45         ctx.clip();
 46 //        ctx.stroke();
 47         ctx.closePath();
 48         //画圆盘
 49         var img=new Image();
 50         img.src='images/1.png';
 51         img.onload=function () {
 52             /* 获取时间*/
 53             var time=new Date();
 54             var h=time.getHours();
 55             var m=time.getMinutes();
 56             var s=time.getSeconds();
 57             h=h>=11?h-12:h;//24小时制转换成12小时制
 58             h=h+(m/60);//分钟转换成的小时
 59             m=m+(s/60);//秒数转换成的分钟
 60             time2.innerHTML=parseInt(h)+':'+parseInt(m)+":"+s;
 61             /* 画背景图*/
 62             ctx.drawImage(img,0,0,400,400);
 63             /*中心原点*/
 64             ctx.beginPath();
 65             ctx.source='over';
 66             ctx.arc(200,200,5,0,360,false);
 67             ctx.fillStyle='yellow';
 68             ctx.strokeStyle='pink';
 69             ctx.stroke();
 70             ctx.fill();
 71             ctx.closePath();
 72 
 73 
 74             for(var i=0;i<60;i++){//分刻度
 75                 ctx.save();//保存原始状态
 76                 ctx.beginPath();
 77                 ctx.translate(200,200);//改变中心位置
 78                 ctx.rotate(6*i*Math.PI/180);//每一个的旋转角度
 79                 ctx.moveTo(0,-190);
 80                 ctx.lineTo(0,-180);
 81                 ctx.strokeStyle='black';
 82                 ctx.lineWidth=10;
 83                 ctx.stroke();
 84                 ctx.closePath();
 85                 ctx.restore();//恢复初始状态
 86             }
 87             for(var i=0;i<12;i++){//时刻度
 88                 ctx.save();//保存原始状态
 89                 ctx.beginPath();
 90                 ctx.translate(200,200);//改变中心位置
 91                 ctx.rotate(30*i*Math.PI/180);//每一个的旋转角度
 92                 ctx.moveTo(0,-190);
 93                 ctx.lineTo(0,-170);
 94                 ctx.strokeStyle='red';
 95                 ctx.lineWidth=10;
 96                 ctx.stroke();
 97                 ctx.closePath();
 98                 ctx.restore();//恢复初始状态
 99 
100                 /*时针*/
101                 ctx.save();//保存状态
102                 ctx.beginPath();
103                 ctx.translate(200,200);
104                 ctx.rotate(h*30*Math.PI/180);//时针旋转的角度
105                 ctx.moveTo(0,0);
106                 ctx.lineTo(0,-150);
107                 ctx.strokeStyle='pink';
108                 ctx.lineWidth=5;
109                 ctx.stroke();
110                 ctx.closePath();
111                 ctx.restore();
112 
113                 /*分针走动*/
114                 ctx.save();//保存状态
115                 ctx.beginPath();
116                 ctx.translate(200,200);
117                 ctx.rotate(m*6*Math.PI/180);//分针旋转的角度
118                 ctx.moveTo(0,0);
119                 ctx.lineTo(0,-165);
120                 ctx.strokeStyle='yellow';
121                 ctx.lineWidth=3;
122                 ctx.stroke();
123                 ctx.closePath();
124                 ctx.restore();
125 
126                 /*秒针走动*/
127                 ctx.save();//保存状态
128                 ctx.beginPath();
129                 ctx.translate(200,200);
130                 ctx.rotate(s*6*Math.PI/180);//秒针旋转的角度
131                 ctx.moveTo(0,0);
132                 ctx.lineTo(0,-180);
133                 ctx.strokeStyle='blue';
134                 ctx.lineWidth=1;
135                 ctx.stroke();
136                 ctx.closePath();
137                 //秒针点
138                 ctx.beginPath();
139                 ctx.arc(0,-160,3,0,360,false);
140                 ctx.fillStyle='yellow';
141                 ctx.fill();
142                 ctx.restore();
143 
144             }
145         }
146     }
147     clock();
148     setInterval(clock,1000);
149 </script>
150 </body>
151 </html>
index