html5 canvas 时钟实例

html5 clock
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>html5 clock</title>
 5 <meta content="text/html; charset=UTF-8">
 6 </head>
 7 
 8 <body>
 9 <canvas id="myCanvas" width="400" height="300"></canvas>
10 <script type="text/javascript"> 
11         var c = document.getElementById("myCanvas"); 
12         var cxt = c.getContext("2d"); 
13         
14                 var slen = 60; 
15         var mlen = 48; 
16         var hlen = 35; 
17                 
18         cxt.strokeRect(0, 0, c.width, c.height); 
19         
20                 cxt.beginPath(); 
21         cxt.arc(200, 150, 100, 0, 2 * Math.PI, true); 
22         cxt.stroke(); 
23         cxt.closePath(); 
24         
25                 cxt.beginPath(); 
26         cxt.translate(200, 150);  
27         cxt.rotate(-Math.PI / 2); 
28         cxt.save();        
29 
30         for (var i = 0; i < 60; i++) { 
31             if (i % 5 == 0) { 
32                 cxt.fillRect(84, -3, 16, 6); 
33                 cxt.fillText("" + (i / 5 == 0 ? 12 : (i / 5>9?i/5:"0"+i/5)), 70, 3); 
34             } else { 
35                 cxt.fillRect(90, -1, 10, 2); 
36             } 
37             cxt.rotate(Math.PI / 30); 
38         } 
39         cxt.closePath(); 
40 
41         var s = 0, m = 0, h = 0;
42                  
43                 function Refresh() { 
44                         cxt.restore(); 
45                     cxt.save();
46                     cxt.rotate(s * Math.PI / 30); 
47                     cxt.clearRect(-13, -2, slen+2, 4); 
48                             cxt.restore(); 
49                         cxt.save(); 
50                         
51                         cxt.rotate((m+s/60) * Math.PI / 30); 
52                     cxt.clearRect(-11, -2, slen+2, 4); 
53                             cxt.restore(); 
54                         cxt.save(); 
55 
56                     cxt.rotate((h+m/60) * Math.PI / 6); 
57                     cxt.clearRect(-9, -3, slen+2, 5); 
58             cxt.restore(); 
59             cxt.save();
60                         
61                     var time = new Date(); 
62             s =time.getSeconds(); 
63             m =time.getMinutes(); 
64             h =time.getHours();            
65 
66             cxt.rotate((h+m/60) * Math.PI / 6); 
67             cxt.fillRect(-8, -2, hlen, 4);                                   
68             cxt.restore(); 
69                         cxt.save();
70                          
71             cxt.rotate((m+s/60) * Math.PI / 30); 
72             cxt.fillRect(-10, -1.5, mlen, 3); 
73             cxt.restore(); 
74                         cxt.save();
75 
76                         cxt.rotate(s * Math.PI / 30); 
77                         cxt.fillStyle='#2e2';
78             cxt.fillRect(-12, -1, slen, 2);
79                 } 
80                 
81                 var MyInterval = setInterval("Refresh();", 1000); 
82 </script>
83 </body>
84 </html>
posted @ 2012-05-23 17:54 小分分阅读(569) 评论(0) 收藏举报
刷新页面返回顶部