HTML5画的简单时钟

浏览数：19 / 时间：2015年06月09日

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 
 7 <script type="text/javascript">
 8 window.onload = function (){
 9     var oC = document.getElementById("c1");
10     
11     var oGC = oC.getContext("2d");
12     var x = 300;
13     var y = 300;
14     var r = 150;
15 
16     var h = 0;
17     var m = 0;
18     var s = 0;
19 
20     
21     setInterval(function (){
22         var date = new Date();
23         h = date.getHours();
24         m = date.getMinutes();
25         s = date.getSeconds();
26         var f = m/2;
27         console.log(h + "-" + m + "-" + s + " , " + f);
28         html5Clock();
29     },1000);
30 
31     function html5Clock(){
32         oGC.beginPath();
33         for(var i = 0; i<60;i++){
34             oGC.moveTo(x,y);
35             oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180);
36                 
37         }
38         oGC.closePath();
39         oGC.stroke();
40 
41         oGC.beginPath();
42         oGC.fillStyle = "#fff";
43         oGC.arc(x,y,r-8,0,2*Math.PI);
44         oGC.closePath();
45         oGC.fill();
46 
47 
48         oGC.beginPath();
49         //oGC.fillStyle = "red";
50         for(var i=0;i<12;i++){
51             oGC.moveTo(x,y);
52             oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180);
53             //oGC.lineWidth = "2";
54         }
55         oGC.closePath();
56         oGC.stroke();
57         
58         oGC.beginPath();
59         oGC.arc(x,y,r-20,0,2*Math.PI);
60         oGC.closePath();
61         oGC.fill();
62 
63         //秒钟
64         oGC.beginPath();
65         //oGC.strokeStyle = "#016a9f";
66         oGC.moveTo(x,y);
67         oGC.arc(x,y,r-9,6*(s-15)*Math.PI/180,6*(s-15)*Math.PI/180);
68         oGC.lineWidth = "1";
69         oGC.stroke();
70 
71         //分钟
72         oGC.beginPath();
73         oGC.moveTo(x,y);
74         oGC.arc(x,y,r-12,6*(m-15)*Math.PI/180,6*(m-15)*Math.PI/180);
75         //oGC.lineWidth = 2;
76         oGC.stroke();
77 
78         //时钟
79         oGC.beginPath();
80         //oGC.strokeStyle = "red";
81         oGC.moveTo(x,y);
82         oGC.arc(x,y,r-50,(30*(h-3)+(m/2))*Math.PI/180,(30*(h-3)+(m/2))*Math.PI/180);
83         oGC.stroke();
84     }
85 
86     html5Clock();
87         
88 }
89 </script>
90 
91 </head>
92 
93 <body>
94 
95 <canvas id="c1" width="800" height="600" style="border:1px solid #ccc;"></canvas>
96 
97 </body>
98 </html>