使用HTML5的canvas做一个会动的时钟-阿里云开发者社区

开发者社区> 科技小能手> 正文

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

 


本文转自shyleoking 51CTO博客,原文链接:http://blog.51cto.com/shyleoking/864007

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
25934 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
9958 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9336 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2144 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11700 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
8149 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
6415 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
2989 0
23706
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载