canvas - 钟表

Demo : Demo 

Demo截图：

代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6 <style>
  7     *{ margin:0;padding:0; }
  8     body,html{width:100%;height:100%; overflow:hidden; min-width: 800px;min-height:800px;}
  9     canvas{ background-color: #fff; padding:0;}
 10 </style>
 11 <script>
 12     window.onload = function(){
 13 
 14         var oCanvas = document.getElementById('canvas');
 15         var oCtx = oCanvas.getContext('2d');
 16         var winWidth = document.body.clientWidth;
 17         var winHeight = document.body.clientHeight;
 18         var oBody = document.getElementsByTagName('body')[0];
 19         var propX = propY = 0;
 20 
 21         var timer = null;
 22 
 23         var X = 300;
 24         var Y = 300;
 25         
 26 
 27         oCanvas.setAttribute('width',winWidth);
 28         oCanvas.setAttribute('height',winHeight);
 29 
 30         setTime();
 31         timer = setInterval(setTime,1000);
 32 
 33         //设置时间方法;
 34         function setTime(){
 35             winWidth = document.body.clientWidth;
 36             winHeight = document.body.clientHeight;
 37 
 38             var myDate  = new Date(),
 39                 seconds = myDate.getSeconds(),
 40                 minutes = myDate.getMinutes() + seconds/60,
 41                 hours   = myDate.getHours() + minutes/60;    
 42 
 43             oCtx.clearRect(0,0,winWidth,winHeight);
 44 
 45             //画底层3分针小刻度;
 46             oCtx.save();
 47                 oCtx.beginPath();
 48                 for( var i=0,len=60;i<=len;i++ ){
 49                     
 50                     oCtx.arc(X,Y,200,0,Math.PI/180*i*6,false);
 51                     oCtx.lineTo(X,Y);
 52                     oCtx.stroke();    
 53                     oCtx.strokeStyle = '#000';
 54                     oCtx.lineWidth = 2;
 55 
 56                 }
 57                 oCtx.closePath();
 58             oCtx.restore();
 59 
 60             //画盖住的底层的白圆;
 61             oCtx.save();
 62                 oCtx.beginPath();
 63                 oCtx.arc(X,Y,190,0,2*Math.PI);
 64                 oCtx.fillStyle="#fff";
 65                 oCtx.fill();
 66                 oCtx.closePath();
 67             oCtx.restore();
 68 
 69             oCtx.save();
 70                 oCtx.beginPath();
 71                 for( var i=0,len=12;i<=len;i++ ){
 72                     
 73                     oCtx.arc(X,Y,200,0,Math.PI/180*i*30,false);
 74                     oCtx.lineTo(X,Y);
 75                     oCtx.stroke();    
 76                     oCtx.strokeStyle = '#000';
 77                     oCtx.lineWidth = 4;
 78 
 79                 }
 80                 oCtx.closePath();
 81             oCtx.restore();
 82 
 83             //画底层时针的大刻度;
 84             oCtx.save();
 85                 oCtx.beginPath();
 86                 oCtx.arc(X,Y,183,0,2*Math.PI);
 87                 oCtx.fillStyle="#fff";
 88                 oCtx.fill();
 89                 oCtx.closePath();
 90             oCtx.restore();
 91 
 92             //画盖住的底层的白圆;
 93             oCtx.save();
 94                 oCtx.arc(X,Y,183,0,2*Math.PI);
 95                 oCtx.fillStyle="#fff";
 96                 oCtx.fill();
 97             oCtx.restore();
 98             
 99             //填充数字;
100             oCtx.save();
101                 var r = 160;
102                 for( var i=1,len=12;i<=12;i++ ){
103                     oCtx.font = "40px Microsoft yahei";
104                     oCtx.textAlign='center';
105                     oCtx.textBaseline='middle';
106                     var x = Math.sin( i*360/12*Math.PI/180 )*r + X;
107                     var y = -Math.cos( i*360/12*Math.PI/180 )*r + Y;
108                     oCtx.fillText(i,x,y,40);
109                 }
110             oCtx.restore();
111 
112             //画时针;
113             oCtx.save();
114                 oCtx.lineCap="round";
115                 oCtx.lineWidth = 8;
116                 oCtx.strokeStyle = "#000" ;
117                 oCtx.translate(X,Y);
118                 oCtx.rotate(hours*30*Math.PI/180);
119                 oCtx.beginPath();
120                 oCtx.moveTo(0,-80);
121                 oCtx.lineTo(0,10);
122                 oCtx.stroke();
123                 oCtx.closePath();
124             oCtx.restore();
125 
126             //分时针;
127             oCtx.save();
128                 oCtx.lineCap="round";
129                 oCtx.lineWidth = 6;
130                 oCtx.strokeStyle = "#000" ;
131                 oCtx.translate(X,Y);
132                 oCtx.rotate( minutes*6*Math.PI/180 );
133                 oCtx.beginPath();
134                 oCtx.moveTo(0,-120);
135                 oCtx.lineTo(0,10);
136                 oCtx.stroke();
137                 oCtx.closePath();
138             oCtx.restore();
139 
140             //画分针;
141             oCtx.save();
142                 oCtx.lineCap="round";
143                 oCtx.lineWidth = 2;
144                 oCtx.strokeStyle = "red" ;
145                 oCtx.translate(X,Y);
146                 oCtx.rotate( seconds*6*Math.PI/180 );
147                 oCtx.beginPath();
148                 oCtx.moveTo(0,-160);
149                 oCtx.lineTo(0,10);
150                 oCtx.stroke();
151                 oCtx.closePath();
152             oCtx.restore();
153 
154             //画盖住的底层的白圆;
155             oCtx.save();
156                 oCtx.arc(X,Y,15,0,2*Math.PI);
157                 oCtx.fillStyle="#000";
158                 oCtx.fill();
159             oCtx.restore();
160 
161             oCtx.save();
162                 oCtx.beginPath();
163                 oCtx.arc(X,Y,200,0,2*Math.PI,true);
164                 oCtx.stroke();    
165 
166                 oCtx.closePath();
167             oCtx.restore();
168 
169         }
170 
171         oCanvas.onmousedown = function( event ){
172 
173             var ev = window.event || event;
174 
175             
176             var btn = false;
177 
178             if( oCtx.isPointInPath( ev.clientX , ev.clientY ) ){
179                 var yuanX = X;
180                 var yuanY = Y;
181                 var disX = ev.clientX;
182                 var disY = ev.clientY;
183                 btn = true;
184 
185 
186             }
187 
188             document.onmousemove = function( event ){
189                 
190                 var ev = window.event || event;
191 
192                 if( btn ){
193 
194                     clearInterval(setTime);
195 
196                     var lastX = ev.clientX - disX;
197                     var    lastY = ev.clientY - disY;
198 
199                     X = lastX + yuanX;
200                     Y = lastY + yuanY;
201 
202                     if( X <= 200 ){
203 
204                         X = 200;
205 
206                     }
207 
208                     if( X >= winWidth - 200 ){
209                         X = winWidth - 200;
210                     }
211 
212                     if(  Y <= 200  ){
213                         Y = 200;
214                     }
215 
216                     if( Y >= winHeight - 200 ){
217                         Y = winHeight - 200;
218                     }
219 
220                     setTime();
221                 }    
222                      
223             }    
224         }
225         
226         oCanvas.onmouseup = function(){
227 
228             btn = false;
229             document.onmousemove = null;
230             timer = setInterval(setTime,1000);
231 
232 
233         }
234 
235         window.onresize = function(){
236 
237             var bodyWidth = document.body.clientWidth;
238             var bodyHeigth = document.body.clientHeight;
239             
240             propX = bodyWidth / winWidth;
241             propY = bodyHeigth / winHeight;
242 
243             if( X >= bodyWidth - 200  ){
244                 X = X * propX;
245             }
246 
247             if( Y >= bodyHeigth - 200 ){
248                 Y = Y * propY;
249             }
250 
251 
252             winWidth = bodyWidth;
253             winHeight = bodyHeigth;
254 
255             oCanvas.setAttribute('width',winWidth);
256             oCanvas.setAttribute('height',winHeight);
257 
258             
259 
260         }
261     }
262 
263 </script>
264 </head>
265 <body>
266     <canvas id="canvas"></canvas>
267 </body>
268 </html>
View Code

 

后记:

其实网上好多这种画表的也没啥可说的就是css3那个差不多。。。

主要是写拖拽让我费点了功夫 isPointInPath() 这个方法是判断点点击是否在画图上但是只是最后一次绘画上面，

所以偷巧在整个表都画完的最后在画了一个空圆做这个isPointInPath()用，剩下就跟Dom拖拽基本一样了。

不过还是有点小bug 就是 在放大缩小浏览器的时候 绘制的圆心点的X、Y坐标可能不对，虽然我用了比例去算这个 但还是有点小问题，没有想出好的解决办法，有知道怎么解决谢谢告知。。。。 　　

posted @ 2015-08-18 09:28  uustoboy  阅读(253)  评论(0)    收藏  举报