使用HTML5的canvas做一个会动的时钟

这次我们的目标是画一个会和时间同步的时钟，不过没有美学感觉，样子丑的厉害。

 

 

 

HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。

我们做所有的画之情需要一个画布，html的canvas标签就是帮我们声明了一个画布。

1. [javascript] view plaincopy 
2. <canvas id="mycanvas">  
3. </canvas> 

这个默认的画布的大小是300*150，接下来的工作大多就是javaScript来做了。
首先要实例化这个画布

1. [javascript] view plaincopy 
2. $(  
3. function() {  
4. var canvas = document.getElementById("mycanvas");  
5. $.log(canvas.width);  
6. $.log(canvas.height);  
7. var context = canvas.getContext("2d");  
8. $.log(context.canvas);  
9. $.log(context.fillStyle); //要填充的区域的颜色  
10. $.log(context.strokeStyle); //要绘制的线条的颜色  
11. $.log(context.lineCap); //笔帽样式  
12. $.log(context.lineJoin); //两条连续线段的连接样式  
13. $.log(context.lineWidth); //线段的宽度  
14. $.log(context.miterLimit); //斜联接  
15. $.log(context.shadowColor); //阴影的颜色，默认为#000000，  
16. $.log(context.shadowOffsetX); //阴影在x方向上的偏移量，默认为0，不受坐标转换的影响。  
17. $.log(context.shadowOffsetY); //阴影在y方向上的偏移量，默认为0，不受坐标转换的影响。  
18. $.log(context.shadowBlur); //阴影的模糊度，默认为0，负数值将会被忽略  
19. }  
20. ); 

上面的结果你可以得到一个大致的想法，就是content可以认为是我们将来作画用的画笔（估计有专业人士对强烈抗议，我直接忽略），canvas就是我们的画布。我们现在的画笔是2D的画笔，换句话说就是画平面几何的画笔。
接下来，就是我们利用这个画笔来学习怎么画了

 

各种线

1. [javascript] view plaincopy 
2. $(  
3. function() {  
4. var canvas = document.getElementById("mycanvas");  
5. var context = canvas.getContext("2d");  
6. context.strokeStyle = "rgb(255, 0, 0)";  
7.  
8. context.beginPath();  
9. context.lineCap = "butt"; //默认  
10. context.lineWidth = 10;  
11. context.moveTo(10, 10);  
12. context.lineTo(100, 10); //简单的一条线  
13. context.stroke(); //该方法真正在画布上绘制该线段  
14.  
15. context.beginPath();  
16. context.lineCap = "round"; //圆形线头  
17. context.moveTo(10, 30);  
18. context.lineTo(100, 30);  
19. context.stroke(); //该方法真正在画布上绘制该线段  
20.  
21. context.beginPath();  
22. context.lineCap = "square"; //方形线头  
23. context.moveTo(10, 50);  
24. context.lineTo(100, 50);  
25. context.stroke(); //该方法真正在画布上绘制该线段  
26. }  
27. ); 
28.  
29. 各种阴影 
30. [javascript] view plaincopy 
31. $(  
32. function() {  
33. var canvas = document.getElementById("mycanvas");  
34. var context = canvas.getContext("2d");  
35. context.strokeStyle = "rgb(255, 0, 0)";  
36. context.lineWidth = 10;  
37. context.shadowColor = "#0000FF";  
38.  
39. context.beginPath();  
40. context.lineCap = "round";  
41. context.moveTo(10, 10);  
42. context.lineTo(100, 10);  
43. context.shadowOffsetX = 10;  
44. context.shadowBlur = 10;  
45. context.stroke();  
46.  
47. context.beginPath();  
48. context.lineCap = "round";  
49. context.moveTo(10, 30);  
50. context.lineTo(100, 30);  
51. context.shadowOffsetY = 10;  
52. context.shadowBlur = 10;  
53. context.stroke();  
54.  
55. }  
56. ); 
57.  
58. 各种线∠连接 
59. [javascript] view plaincopy 
60. $(  
61. function() {  
62. var canvas = document.getElementById("mycanvas");  
63. var context = canvas.getContext("2d");  
64. context.strokeStyle = "rgb(255, 0, 0)";  
65. context.lineWidth = 10;  
66. context.shadowColor = "#0000FF";  
67.  
68. context.beginPath();  
69. context.lineJoin = "miter"; //两条线段的外边缘一直扩展到它们相交  
70. context.moveTo(10, 70);  
71. context.lineTo(50, 10);  
72. context.lineTo(80, 70);  
73. context.stroke();  
74.  
75. context.lineJoin = "bevel"; //以一个斜边进行连接  
76. context.moveTo(100, 70);  
77. context.lineTo(140, 10);  
78. context.lineTo(180, 70);  
79. context.stroke();  
80.  
81. context.lineJoin = "round"; //:以一个圆弧边进行连接  
82. context.beginPath();  
83. context.moveTo(200, 70);  
84. context.lineTo(240, 10);  
85. context.lineTo(280, 70);  
86. context.stroke();  
87. context.closePath(); //关闭path  
88.  
89. }  
90. ); 
91.  
92. mitre的限定 
93. [javascript] view plaincopy 
94. $(  
95. function() {  
96. var canvas = document.getElementById("mycanvas");  
97. var context = canvas.getContext("2d");  
98. context.strokeStyle = "rgb(255, 0, 0)";  
99. context.lineWidth = 10;  
100. context.shadowColor = "#0000FF";  
101.  
102.  
103. context.beginPath();  
104. context.miterLimit = 1; //miterLimit 属性为斜面的长度设置一个上限。  
105. //只对线条使用设置为 "miter" 的 lineJoin 属性绘制并且两条线段以锐角相交的时候有效  
106. context.lineJoin = "miter"; //两条线段的外边缘一直扩展到它们相交  
107. context.moveTo(10, 70);  
108. context.lineTo(50, 10);  
109. context.lineTo(80, 70);  
110. context.stroke();  
111.  
112. }  
113. ); 
114.  
115. 各种几何图形 
116.  
117. [javascript] view plaincopy 
118. $(  
119. function() {  
120. var canvas = document.getElementById("mycanvas");  
121. canvas.height = 500; //改变默认高度  
122. canvas.width = 500;  
123. var context = canvas.getContext("2d");  
124. context.strokeStyle = "rgb(255, 0, 0)";  
125. context.fillStyle = "#AABBCC";  
126. context.lineWidth = 2;  
127. context.shadowColor = "#0000FF";  
128.  
129. //矩形  
130. context.beginPath();  
131. context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height  
132. context.strokeRect(70, 10, 50, 50)//空心矩形:x,y,width,height  
133.  
134. //context.move(10,100);  
135.  
136. //圆弧:x, y, radius, startAngle, endAngle, anticlockwise  
137. context.beginPath();  
138. context.arc(35, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
139. context.stroke();  
140. //context.closePath();  
141.  
142. context.beginPath();  
143. context.arc(85, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 180, false);  
144. context.stroke();  
145. //context.closePath();  
146.  
147. context.beginPath();  
148. context.arc(135, 110, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 180, true);  
149. context.stroke();  
150. //context.closePath();  
151.  
152. context.beginPath();  
153. context.arc(185, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 360, true);  
154. context.stroke();  
155. //context.closePath();  
156.  
157. context.beginPath();  
158. context.arc(235, 110, 25, (Math.PI / 180) * 90, (Math.PI / 180) * 0, false);  
159. context.fillStyle = "blue";  
160. context.fill();  
161. //context.stroke();  
162. //context.closePath();  
163.  
164. context.beginPath();  
165. context.arc(285, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 45, false);  
166. context.closePath();  
167. context.stroke();  
168.  
169. context.beginPath();  
170. context.arc(335, 110, 25, (Math.PI / 180) * 180, (Math.PI / 180) * 45, false);  
171. context.closePath();  
172. context.fillStyle = "blue";  
173. context.fill();  
174. context.stroke();  
175.  
176. //曲线  
177.  
178.  
179. context.beginPath();  
180. context.moveTo(10, 160); //二次贝塞尔曲线的起始点  
181. //controlX, controlY, endX, endY  
182. context.quadraticCurveTo(70, 280, 235, 140);  
183. context.stroke();  
184. context.closePath();  
185.  
186. context.beginPath();  
187. context.moveTo(10, 300); //三次贝塞尔曲线的起始点  
188. //controlX1, controlY1, controlX2, controlY2, endX, endY  
189. context.bezierCurveTo(70, 280, 50, 400, 235, 190);  
190. context.stroke();  
191. context.closePath();  
192.  
193.  
194. }  
195. ); 
196.  
197. 各种变换 
198. 记得CSS3中的transform不？canvas肯定也有啊 
199.  
200. 平移 
201.  
202. [javascript] view plaincopy 
203. $(  
204. function() {  
205. var canvas = document.getElementById("mycanvas");  
206. canvas.height = 500; //改变默认高度  
207. canvas.width = 500;  
208. var context = canvas.getContext("2d");  
209. context.strokeStyle = "rgb(255, 0, 0)";  
210. context.fillStyle = "#AABBCC";  
211. context.lineWidth = 2;  
212. context.shadowColor = "#0000FF";  
213. context.moveTo(10, 10);  
214. //context.beginPath();  
215. //context.beginPath();  
216. context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height  
217. //context.stroke();  
218. $(canvas).on(  
219. "click",  
220. { "context": context },  
221. function(e) {  
222. $.log(e.data.context);  
223. var ctx = e.data.context;  
224. ctx.translate(10, 10); //再最后的路径点上偏移10*10的位置  
225. context.fillRect(10, 10, 50, 50);  
226. context.stroke();  
227. }  
228. );  
229. }  
230. ); 
231.  
232. 缩放 
233. [javascript] view plaincopy 
234. $(  
235. function() {  
236. var canvas = document.getElementById("mycanvas");  
237. canvas.height = 500; //改变默认高度  
238. canvas.width = 500;  
239. var context = canvas.getContext("2d");  
240. context.strokeStyle = "rgb(255, 0, 0)";  
241. context.fillStyle = "#AABBCC";  
242. context.lineWidth = 2;  
243. context.shadowColor = "#0000FF";  
244. context.moveTo(10, 10);  
245. //context.beginPath();  
246. //context.beginPath();  
247. context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height  
248. //context.stroke();  
249. $(canvas).on(  
250. "click",  
251. { "context": context },  
252. function(e) {  
253. $.log(e.data.context);  
254. var ctx = e.data.context;  
255. ctx.scale(1.1, 1.1); //在最后的大小基础上缩放倍数 必须是正数  
256. context.fillRect(10, 10, 50, 50);  
257. context.stroke();  
258. }  
259. );  
260. }  
261. ); 
262.  
263.  
264. 旋转 
265.  
266. [javascript] view plaincopy 
267. $(  
268. function() {  
269. var canvas = document.getElementById("mycanvas");  
270. canvas.height = 500; //改变默认高度  
271. canvas.width = 500;  
272. var context = canvas.getContext("2d");  
273. context.strokeStyle = "rgb(255, 0, 0)";  
274. context.fillStyle = "#AABBCC";  
275. context.lineWidth = 2;  
276. context.shadowColor = "#0000FF";  
277. context.moveTo(10, 10);  
278. //context.beginPath();  
279. //context.beginPath();  
280. context.fillRect(10, 10, 50, 50); //实体矩形:x,y,width,height  
281. //context.stroke();  
282. $(canvas).on(  
283. "click",  
284. { "context": context },  
285. function(e) {  
286. $.log(e.data.context);  
287. var ctx = e.data.context;  
288. ctx.rotate((Math.PI / 180) * 10); //旋转的角度，旋转的中心是canvas坐标原点 
289. context.fillRect(10, 10, 50, 50);  
290. context.stroke();  
291. }  
292. );  
293. }  
294. ); 

transform，transform的参数比较多，也比较难理解，简单的说transform是最自由的变形方式，下面给出些参考

1. [javascript] view plaincopy 
2. //以下两段代码结果一致  
3. context.transform(1, 0, 0, 1, 10, 10)  
4. context.translate(10, 10);  
5.  
6. //以下两段代码结果一致  
7. context.transform(10, 0, 0, 10, 0, 0);  
8. context.scale(10, 10);  
9.  
10. //以下三段代码结果一致  
11. context.transform(Math.cos((Math.PI / 180) * 10), Math.sin((Math.PI / 180) * 10), -Math.sin((Math.PI / 180) * 10), Math.cos((Math.PI / 180)) * 10, 0, 0);  
12. context.transform(-Math.sin((Math.PI/180)*10),Math.cos((Math.PI/180)*10),Math.cos((Math.PI/180)*10)，Math.sin((Math.PI/180)*10), 0,0);  
13. context.rotate(10); 

组合

1. [javascript] view plaincopy 
2. $(  
3. function() {  
4. var canvas = document.getElementById("mycanvas");  
5. canvas.height = 100;  
6. canvas.width = 100;  
7. var context = canvas.getContext("2d");  
8. context.fillStyle = "#AABBCC";  
9. context.fillRect(10, 10, 50, 50);  
10. //默认 新图形会覆盖在原有内容之上  
11. context.globalCompositeOperation = "source-over";  
12. context.fillStyle = "blue";  
13. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
14. context.fill();  
15. $("span").html(context.globalCompositeOperation);  
16. $(canvas).toggle(  
17. function() {  
18. canvas.width = 100;  
19. // 原有内容之下绘制新图形  
20. context.clearRect(0, 0, 500, 500);  
21. context.beginPath();  
22. context = canvas.getContext("2d");  
23. context.fillStyle = "#AABBCC";  
24. context.fillRect(10, 10, 50, 50);  
25. context.globalCompositeOperation = "destination-over";  
26. context.fillStyle = "blue";  
27. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
28. context.fill();  
29. $("span").html(context.globalCompositeOperation);  
30. },  
31. function() {  
32. canvas.width = 100;  
33. //新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的  
34. context.clearRect(0, 0, 500, 500);  
35. context.beginPath();  
36. context.fillStyle = "#AABBCC";  
37. context.fillRect(10, 10, 50, 50);  
38. context.globalCompositeOperation = "source-in";  
39. context.fillStyle = "blue";  
40. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
41. context.fill();  
42. $("span").html(context.globalCompositeOperation);  
43. },  
44. function() {  
45. canvas.width = 100;  
46. //原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的destination-in 
47. context.clearRect(0, 0, 500, 500);  
48. context.beginPath();  
49. context = canvas.getContext("2d");  
50. context.fillStyle = "#AABBCC";  
51. context.fillRect(10, 10, 50, 50);  
52. context.globalCompositeOperation = "destination-in";  
53. context.fillStyle = "blue";  
54. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
55. context.fill();  
56. $("span").html(context.globalCompositeOperation);  
57.  
58. },  
59. function() {  
60. canvas.width = 100;  
61. //只有新图形中与原有内容不重叠的部分会被绘制出来source-out  
62. context.clearRect(0, 0, 500, 500);  
63. context.beginPath();  
64. context = canvas.getContext("2d");  
65. context.fillStyle = "#AABBCC";  
66. context.fillRect(10, 10, 50, 50);  
67. context.globalCompositeOperation = "source-out";  
68. context.fillStyle = "blue";  
69. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
70. context.fill();  
71. $("span").html(context.globalCompositeOperation);  
72. },  
73. function() {  
74. canvas.width = 100;  
75. //原有内容中与新图形不重叠的部分会被保留  
76. context.clearRect(0, 0, 500, 500);  
77. context.beginPath();  
78. context = canvas.getContext("2d");  
79. context.fillStyle = "#AABBCC";  
80. context.fillRect(10, 10, 50, 50);  
81. context.globalCompositeOperation = "destination-out";  
82. context.fillStyle = "blue";  
83. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
84. context.fill();  
85. $("span").html(context.globalCompositeOperation);  
86. },  
87. function() {  
88. canvas.width = 100;  
89. //新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上  
90. context.clearRect(0, 0, 500, 500);  
91. context.beginPath();  
92. context = canvas.getContext("2d");  
93. context.fillStyle = "#AABBCC";  
94. context.fillRect(10, 10, 50, 50);  
95. context.globalCompositeOperation = "source-atop";  
96. context.fillStyle = "blue";  
97. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
98. context.fill();  
99. $("span").html(context.globalCompositeOperation);  
100. },  
101. function() {  
102. canvas.width = 100;  
103. //原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形  
104. context.clearRect(0, 0, 500, 500);  
105. context.beginPath();  
106. context = canvas.getContext("2d");  
107. context.fillStyle = "#AABBCC";  
108. context.fillRect(10, 10, 50, 50);  
109. context.globalCompositeOperation = "destination-atop";  
110. context.fillStyle = "blue";  
111. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
112. context.fill();  
113. $("span").html(context.globalCompositeOperation);  
114. },  
115. function() {  
116. canvas.width = 100;  
117. //两图形中重叠部分作加色处理  
118. context.clearRect(0, 0, 500, 500);  
119. context.beginPath();  
120. context = canvas.getContext("2d");  
121. context.fillStyle = "#AABBCC";  
122. context.fillRect(10, 10, 50, 50);  
123. context.globalCompositeOperation = "lighter";  
124. context.fillStyle = "blue";  
125. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
126. context.fill();  
127. $("span").html(context.globalCompositeOperation);  
128. },  
129. function() {  
130. canvas.width = 100;  
131. //两图形中重叠的部分作减色处理darker  
132. context.clearRect(0, 0, 500, 500);  
133. context.beginPath();  
134. context = canvas.getContext("2d");  
135. context.fillStyle = "#AABBCC";  
136. context.fillRect(10, 10, 50, 50);  
137. context.globalCompositeOperation = "darker";  
138. context.fillStyle = "blue";  
139. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
140. context.fill();  
141. $("span").html(context.globalCompositeOperation);  
142. },  
143. function() {  
144. canvas.width = 100;  
145. //重叠的部分会变成透明  
146. context.clearRect(0, 0, 500, 500);  
147. context.beginPath();  
148. context = canvas.getContext("2d");  
149. context.fillStyle = "#AABBCC";  
150. context.fillRect(10, 10, 50, 50);  
151. context.globalCompositeOperation = "xor";  
152. context.fillStyle = "blue";  
153. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
154. context.fill();  
155. $("span").html(context.globalCompositeOperation);  
156. },  
157. function() {  
158. canvas.width = 100;  
159. //只有新图形会被保留，其它都被清除掉  
160. context.clearRect(0, 0, 500, 500);  
161. context.beginPath();  
162. context = canvas.getContext("2d");  
163. context.fillStyle = "#AABBCC";  
164. context.fillRect(10, 10, 50, 50);  
165. context.globalCompositeOperation = "copy";  
166. context.fillStyle = "blue";  
167. context.arc(70, 30, 25, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);  
168. context.fill();  
169. $("span").html(context.globalCompositeOperation);  
170. alert("演示结束");  
171. }  
172. );  
173. }  
174. ); 
175.  
176. 字体（看文档说canvas的字体支持CSS样式的描写，但是，我不知道怎么样让canvas的font支持CSS3的在线字体） 
177. [javascript] view plaincopy 
178. <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>  
179.  
180. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">  
181.  
182. <script type="text/javascript">  
183. $.log = function(msg) {  
184. console.log(msg);  
185. }  
186.  
187. $(  
188. function() {  
189. var canvas = document.getElementById("mycanvas");  
190. canvas.height = 200;  
191. canvas.width = 200;  
192. var context = canvas.getContext("2d");  
193. context.font = "20px 新宋体";  
194. context.fillText("这是实心新宋体", 10, 30);  
195. context.strokeText("这是空心新宋体", 10, 60);  
196. context.font = "20px Tangerine serif";  
197. context.fillText("Hello HTML5", 10, 100);  
198. context.strokeText("Hello HTML5", 10, 150);  
199.  
200. }  
201. );  
202. </script> 

我们尝试写一圈旋转的文字，吧上面的知识点合起来看看效果

1. [javascript] view plaincopy 
2. $(  
3. function() {  
4. var canvas = document.getElementById("mycanvas");  
5. canvas.height = 500;  
6. canvas.width = 500;  
7. var context = canvas.getContext("2d");  
8. context.translate(150, 150);  
9. context.scale(0.7, 0.7);  
10. context.font = "12px Tahoma";  
11. for (var i = 0; i < 12; i++) {  
12. context.fillText((i + 3) % 12 == 0 ? 12 : (i + 3) % 12, 150, 10);  
13. context.rotate((Math.PI / 6));  
14. }  
15. }  
16. ); 

在具体绘制的时候，定位总是让我这样没有空间感的人感觉痛苦，所以我现在canvas上画上很多格子，帮助我进行布局

1. [javascript] view plaincopy 
2. $(  
3. function() {  
4. var canvas = document.getElementById("mycanvas");  
5. canvas.height = 500;  
6. canvas.width = 500;  
7. var context = canvas.getContext("2d");  
8. context.lineWidth = 1;  
9. context.strokeStyle = "rgb(211,211,211)";  
10.  
11. for (var i = 0; i < 50; i++) {  
12. $.log(i);  
13. context.moveTo(i * 10, 0);  
14. context.lineTo(i * 10, 500);  
15. context.stroke();  
16. }  
17.  
18. for (var i = 0; i < 50; i++) {  
19. $.log(i);  
20. context.moveTo(0, i * 10);  
21. context.lineTo(500, i * 10);  
22. context.stroke();  
23. }  
24. }  
25. ); 

前面的准备工作都完成了，现在我们来综合下，完成一个具有时分秒的会动的钟 

1. $( 
2. function() { 
3.     clock(); 
4.     setInterval(clock, 1000); 
5. } 
6. ); 
7.  
8. function clock() { 
9.     var canvas = document.getElementById("mycanvas"); 
10.     canvas.height = 500; 
11.     canvas.width = 500; 
12.     var context = canvas.getContext("2d"); 
13.  
14.     context.beginPath(); 
15.     context.lineWidth = 1; 
16.     context.strokeStyle = "rgb(211,211,211)"; 
17.  
18.     for (var i = 0; i < 50; i++) { 
19.         $.log(i); 
20.         context.moveTo(i * 10, 0); 
21.         context.lineTo(i * 10, 500); 
22.         context.stroke(); 
23.     } 
24.  
25.     for (var i = 0; i < 50; i++) { 
26.         $.log(i); 
27.         context.moveTo(0, i * 10); 
28.         context.lineTo(500, i * 10); 
29.         context.stroke(); 
30.     } 
31.  
32.     context.beginPath(); 
33.     context.strokeStyle = "rgb(255,0,0)"; 
34.     context.arc(250, 250, 200, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); 
35.     context.stroke(); 
36.  
37.     context.save(); //存储当前画布坐标系状态 
38.     context.beginPath(); 
39.     context.font = "14px Tahoma" 
40.     context.translate(255, 255); //将坐标系坐标原点移至图中间 
41.     context.strokeStyle = "#FFFFFF"; 
42.     for (var i = 0; i < 12; i++) { 
43.         context.fillText((i + 3) % 12 == 0 ? 12 : (i + 3) % 12, 180, 0); 
44.         context.rotate((Math.PI / 6)); 
45.     } 
46.     context.restore(); 
47.  
48.     context.save(); 
49.     context.beginPath(); 
50.     context.lineWidth = 5; 
51.     context.translate(255, 255); //将坐标系坐标原点移至图中间 
52.     for (i = 0; i < 60; i++) { 
53.         if (i % 5 != 0) { 
54.             context.beginPath(); 
55.             context.moveTo(180, 0); 
56.             context.lineTo(190, 0); 
57.             context.stroke(); 
58.         } 
59.         context.rotate(Math.PI / 30); 
60.     } 
61.     context.restore(); 
62.  
63.     var now = new Date(); 
64.     var sec = now.getSeconds(); 
65.     var min = now.getMinutes(); 
66.     var hr = now.getHours() >= 12 ? now.getHours() - 12 : now.getHours(); 
67.     context.save(); 
68.     context.translate(255, 255); //将坐标系坐标原点移至图中间 
69.     // - (Math.PI / 6) * 3 是因为0度在3点这里 
70.     context.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec - (Math.PI / 6) * 3); 
71.     context.lineWidth = 14; 
72.     context.beginPath(); 
73.     context.moveTo(-20, 0); 
74.     context.lineTo(150, 0); 
75.     context.stroke(); 
76.     context.restore(); 
77.  
78.  
79.     context.save(); 
80.     context.translate(255, 255); //将坐标系坐标原点移至图中间 
81.     context.rotate(min * (Math.PI / 30) + (Math.PI / 1800) * sec - (Math.PI / 6) * 3) 
82.     context.lineWidth = 10; 
83.     context.beginPath(); 
84.     context.moveTo(-28, 0); 
85.     context.lineTo(160, 0); 
86.     context.stroke(); 
87.     context.restore(); 
88.  
89.     context.save(); 
90.     context.translate(255, 255); //将坐标系坐标原点移至图中间 
91.     context.lineWidth = 1; 
92.     context.rotate(sec * (Math.PI / 30) + (Math.PI / 1800) * sec - (Math.PI / 6) * 3) 
93.     context.lineWidth = 10; 
94.     context.beginPath(); 
95.     context.moveTo(-28, 0); 
96.     context.lineTo(160, 0); 
97.     context.stroke(); 
98.     context.restore(); 
99. } 

 

转载于:https://blog.51cto.com/shyleoking/864007