标签：
1 <!DOCTYPE html>
2 <html lang=‘zh-cn‘>
3 <head>
4 <title>Insert you title</title>
5 <meta name=‘description‘ content=‘this is my page‘>
6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8 <link rel=‘stylesheet‘ type=‘text/css‘ href=‘./css/index.css‘ />
9 <script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
10 <style type=‘text/css‘>
11 html,body {
12 margin: 0; padding: 0;
13 }
14
15 html {
16 height: 100%;
17 }
18
19 body {
20 background: #000;
21 }
22
23 #can {
24 background: #FFF; display: block; margin: 25px auto; border-radius: 2px;
25 }
26 </style>
27 <script type=‘text/javascript‘>
28 $( function(){
29 var oCan = $( ‘#can‘ ).get( 0 ).getContext( ‘2d‘ );
30 /*
31 绘制表盘:
32 */
33 oCan.translate( 250 , 225 );
34 oCan.save();
35 function setClock(){
36 oCan.clearRect( -250 , -250 , 500 , 450 );
37 oCan.beginPath();
38 oCan.lineWidth = 5;
39 oCan.strokeStyle = ‘#CAA‘;
40 oCan.arc( 0 , 0 , 150 , 0 * Math.PI / 180 , 360 * Math.PI / 180 , false );
41 oCan.stroke();
42 oCan.closePath();
43 oCan.restore();
44 /*
45 绘制时针刻度线
46 */
47 oCan.save();
48 for( var i = 0 ; i < 12 ; i++ ){
49 oCan.beginPath();
50 oCan.lineWidth = 5;
51 oCan.strokeStyle = ‘#F93‘;
52 oCan.rotate( 30 * Math.PI / 180 );
53 oCan.moveTo( 0 , -145 );
54 oCan.lineTo( 0 , -125 );
55 oCan.stroke();
56 oCan.lineCap = ‘bevel‘;
57 oCan.closePath();
58 }
59 oCan.restore();
60 /*
61 绘制分针刻度线
62 */
63 oCan.save();
64 for( var i = 0 ; i < 60 ; i++ ){
65 oCan.beginPath();
66 oCan.lineWidth = 3;
67 oCan.strokeStyle = ‘#F93‘;
68 oCan.rotate( 6 * Math.PI / 180 );
69 oCan.moveTo( 0 , -145 );
70 oCan.lineTo( 0 , -135 );
71 oCan.stroke();
72 oCan.closePath();
73 }
74 oCan.restore();
75
76 /*
77 获取系统时间对象
78 */
79 var data = new Date();
80 var hour = data.getHours();
81 var minutes = data.getMinutes();
82 var seconds = data.getSeconds();
83 /*
84 绘制时针
85 */
86 oCan.save();
87 oCan.beginPath();
88 oCan.lineCap = ‘round‘;
89 oCan.rotate( ( hour * 30 * Math.PI + Math.floor( 6 * minutes / 15 * Math.PI ) ) / 180 );
90 oCan.lineWidth = 4;
91 oCan.strokeStyle = ‘#F93‘;
92 oCan.moveTo( 0 , 0 );
93 oCan.lineTo( 0 , -135 );
94 oCan.stroke();
95 oCan.closePath();
96 oCan.restore();
97
98 /*
99 绘制分针
100 */
101 oCan.save();
102 oCan.beginPath();
103 oCan.rotate( ( minutes * 6 * Math.PI + Math.floor( 6 * seconds / 60* Math.PI ) ) / 180 );
104 oCan.lineWidth = 3;
105 oCan.strokeStyle = ‘#F93‘;
106 oCan.moveTo( 0 , 0 );
107 oCan.lineTo( 0 , -95 );
108 oCan.stroke();
109 oCan.closePath();
110 oCan.restore();
111 /*
112 绘制秒针
113 */
114 oCan.save();
115 oCan.beginPath();
116 oCan.lineWidth = 2;
117 oCan.strokeStyle = ‘#F93‘;
118 oCan.rotate( seconds * 6 * Math.PI / 180 );
119 oCan.moveTo( 0 , 0 );
120 oCan.lineTo( 0 , -120 );
121 oCan.stroke();
122 oCan.closePath();
123 oCan.restore();
124 /*
125 绘制中央装饰
126 */
127 oCan.save();
128 oCan.beginPath();
129 oCan.lineWidth = 2;
130 oCan.strokeStyle = ‘#F93‘;
131 oCan.fillStyle = ‘#FFF‘;
132 oCan.arc( 0 , 0 , 5 , 0 , 2 * Math.PI , false );
133 oCan.fill();
134 oCan.stroke();
135 oCan.closePath();
136 oCan.restore();
137 }
138 setClock();
139 setInterval( setClock , 1000 );
140 } );
141 </script>
142 </head>
143 <body>
144 <canvas id=‘can‘ width=‘500‘ height=‘450‘>检测到您的浏览器版本过低请升级您的浏览器,以获取更好的用户体验...</canvas>
145 </body>
146 </html>
[ html 绘图 时钟 ] canvas绘图时钟实例演示之三
标签：
原文地址：http://www.cnblogs.com/mysearchblog/p/5927937.html
