详解通过Canvas + JS 实现简易的时钟

之前学习了下html5中的canvas元素，为了练练手就实现了一个简易的时钟。时钟本身并不复杂，也没有使用图片进行美化，不过麻雀虽小五脏俱全，下面就与大家分享一下：

实现效果：

html代码：



    

  1. <!DOCTYPE html> 
    2. 

  2. <html> 
    3. 

  3. <head> 
    4. 

  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 

  5.     <title>Clock</title> 
    6. 

  6.     <style type="text/css"> 
    7. 

  7.     *{ 
    8. 

  8.         margin: 0; 
    9. 

  9.         padding: 0; 
    10. 

  10.     } 
    11. 

  11.     .canvas{ 
    12. 

  12.         margin-left: 20px; 
    13. 

  13.         margin-top: 20px; 
    14. 

  14.         border: solid 1px; 
    15. 

  15.     } 
    16. 

  16.     </style> 
    17. 

  17. </head> 
    18. 

  18. <body onload= "main()"> 
    19. 

  19.  
    20. 

  20. <canvas class = "canvas" id="canvasId" width = '500px' height = '400px'></canvas> 
    21. 

  21.  
    22. 

  22. <script type= "text/javascript" src = "Clock.js"></script> 
    23. 

  23. </body> 
    24. 

  24. </html> 
    25. 



JS代码:




    

  1. var Canvas = {}; 
    2. 

  2.  
    3. 

  3. Canvas.cxt = document.getElementById('canvasId').getContext('2d'); 
    4. 

  4.  
    5. 

  5. Canvas.Point = function(x, y){ 
    6. 

  6.     this.x = x; 
    7. 

  7.     this.y = y; 
    8. 

  8. }; 
    9. 

  9.  
    10. 

  10. /*擦除canvas上的所有图形*/ 
    11. 

  11. Canvas.clearCxt = function(){ 
    12. 

  12.     var me = this; 
    13. 

  13.     var canvas = me.cxt.canvas; 
    14. 

  14.        me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight); 
    15. 

  15. }; 
    16. 

  16.  
    17. 

  17. /*时钟*/ 
    18. 

  18. Canvas.Clock = function(){ 
    19. 

  19.     var me = Canvas, 
    20. 

  20.         c = me.cxt, 
    21. 

  21.         radius = 150, /*半径*/ 
    22. 

  22.         scale = 20, /*刻度长度*/ 
    23. 

  23.         minangle = (1/30)*Math.PI, /*一分钟的弧度*/ 
    24. 

  24.         hourangle = (1/6)*Math.PI, /*一小时的弧度*/ 
    25. 

  25.         hourHandLength = radius/2, /*时针长度*/ 
    26. 

  26.         minHandLength = radius/3*2, /*分针长度*/ 
    27. 

  27.         secHandLength = radius/10*9, /*秒针长度*/ 
    28. 

  28.         center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圆心*/ 
    29. 

  29.     
    30. 

  30.     /*绘制圆心（表盘中心）*/ 
    31. 

  31.     function drawCenter(){ 
    32. 

  32.         c.save(); 
    33. 

  33.  
    34. 

  34.         c.translate(center.x, center.y);  
    35. 

  35.  
    36. 

  36.         c.fillStyle = 'black'; 
    37. 

  37.         c.beginPath(); 
    38. 

  38.         c.arc(0, 0, radius/20, 0, 2*Math.PI); 
    39. 

  39.         c.closePath(); 
    40. 

  40.         c.fill(); 
    41. 

  41.         c.stroke(); 
    42. 

  42.  
    43. 

  43.         c.restore(); 
    44. 

  44.     }; 
    45. 

  45.  
    46. 

  46.     /*通过坐标变换绘制表盘*/ 
    47. 

  47.     function drawBackGround(){ 
    48. 

  48.         c.save(); 
    49. 

  49.  
    50. 

  50.         c.translate(center.x, center.y); /*平移变换*/ 
    51. 

  51.         /*绘制刻度*/ 
    52. 

  52.         function drawScale(){ 
    53. 

  53.            c.moveTo(radius - scale, 0); 
    54. 

  54.            c.lineTo(radius, 0);  
    55. 

  55.         }; 
    56. 

  56.  
    57. 

  57.         c.beginPath(); 
    58. 

  58.         c.arc(0, 0, radius, 0, 2*Math.PI, true); 
    59. 

  59.         c.closePath(); 
    60. 

  60.      
    61. 

  61.         for (var i = 1; i <= 12; i++) { 
    62. 

  62.            drawScale(); 
    63. 

  63.            c.rotate(hourangle); /*旋转变换*/ 
    64. 

  64.         }; 
    65. 

  65.         /*绘制时间(3,6,9,12)*/ 
    66. 

  66.         c.font = " bold 30px impack" 
    67. 

  67.         c.fillText("3", 110, 10); 
    68. 

  68.         c.fillText("6", -7, 120); 
    69. 

  69.         c.fillText("9", -120, 10); 
    70. 

  70.         c.fillText("12", -16, -100); 
    71. 

  71.         c.stroke(); 
    72. 

  72.  
    73. 

  73.         c.restore(); 
    74. 

  74.     }; 
    75. 

  75.  
    76. 

  76.     /*绘制时针(h: 当前时（24小时制）)*/ 
    77. 

  77.     this.drawHourHand = function(h){ 
    78. 

  78.  
    79. 

  79.         h = h === 0? 24: h; 
    80. 

  80.  
    81. 

  81.         c.save(); 
    82. 

  82.         c.translate(center.x, center.y);  
    83. 

  83.         c.rotate(3/2*Math.PI); 
    84. 

  84.  
    85. 

  85.         c.rotate(h*hourangle); 
    86. 

  86.  
    87. 

  87.         c.beginPath(); 
    88. 

  88.         c.moveTo(0, 0); 
    89. 

  89.         c.lineTo(hourHandLength, 0); 
    90. 

  90.         c.stroke(); 
    91. 

  91.         c.restore(); 
    92. 

  92.     }; 
    93. 

  93.  
    94. 

  94.     /*绘制分针（m: 当前分）*/ 
    95. 

  95.     this.drawMinHand = function(m){ 
    96. 

  96.  
    97. 

  97.         m = m === 0? 60: m; 
    98. 

  98.  
    99. 

  99.         c.save(); 
    100. 

  100.         c.translate(center.x, center.y);  
    101. 

  101.         c.rotate(3/2*Math.PI); 
    102. 

  102.  
    103. 

  103.         c.rotate(m*minangle); 
    104. 

  104.  
    105. 

  105.         c.beginPath(); 
    106. 

  106.         c.moveTo(0, 0); 
    107. 

  107.         c.lineTo(minHandLength, 0); 
    108. 

  108.         c.stroke(); 
    109. 

  109.         c.restore(); 
    110. 

  110.     }; 
    111. 

  111.  
    112. 

  112.     /*绘制秒针（s：当前秒）*/ 
    113. 

  113.     this.drawSecHand = function(s){ 
    114. 

  114.  
    115. 

  115.         s = s === 0? 60: s; 
    116. 

  116.  
    117. 

  117.         c.save(); 
    118. 

  118.         c.translate(center.x, center.y);  
    119. 

  119.         c.rotate(3/2*Math.PI); 
    120. 

  120.  
    121. 

  121.         c.rotate(s*minangle); 
    122. 

  122.  
    123. 

  123.         c.beginPath(); 
    124. 

  124.         c.moveTo(0, 0); 
    125. 

  125.         c.lineTo(secHandLength, 0); 
    126. 

  126.         c.stroke(); 
    127. 

  127.         c.restore(); 
    128. 

  128.     }; 
    129. 

  129.  
    130. 

  130.     /*依据本机时间绘制时钟*/ 
    131. 

  131.     this.drawClock = function(){ 
    132. 

  132.         var me = this; 
    133. 

  133.   
    134. 

  134.         function draw(){ 
    135. 

  135.            var date = new Date(); 
    136. 

  136.  
    137. 

  137.            Canvas.clearCxt(); 
    138. 

  138.  
    139. 

  139.            drawBackGround(); 
    140. 

  140.            drawCenter(); 
    141. 

  141.            me.drawHourHand(date.getHours() + date.getMinutes()/60); 
    142. 

  142.            me.drawMinHand(date.getMinutes() + date.getSeconds()/60); 
    143. 

  143.            me.drawSecHand(date.getSeconds()); 
    144. 

  144.         } 
    145. 

  145.         draw(); 
    146. 

  146.         setInterval(draw, 1000); 
    147. 

  147.     };   
    148. 

  148. }; 
    149. 

  149.  
    150. 

  150.  var main = function(){ 
    151. 

  151.     var clock = new Canvas.Clock(); 
    152. 

  152.     clock.drawClock(); 
    153. 

  153. }; 
    154. 



代码中涉及到了一些简单的canvas元素API 大家google一下即可，祝大家学习愉快:-D


来源：51CTO
				


				
时间： 2024-07-30 21:06:29

		
		


		


	

	
	

		


		
详解通过Canvas + JS 实现简易的时钟的相关文章


								

		

			

                Console命令详解,让调试js代码变得更简单
			

		

		

									

				Console命令详解,让调试js代码变得更简单 Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些基本用法.今天,继续介绍它的高级用法. =================================== Firebug控制台详解 作者:阮一峰 出处:http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html 控制台(Conso			

		

	

				

		

			

                详解打开网页js报错问题
			

		

		

									

				  打开网页js报错问题详解,具体内容如下所示: 最近时常会碰到网页报错的问题,因为最近图方便,会用到很多现成的js.  报错的解决,第一个就是看,找出错误,直接就是点右下角的,看一下第几行,然后,右键页面,看源代码,因为如果你直接进程序,有很多include的原因,显示的第几行第几行,很难弄清楚,然后,最简单的方法,一个一个js排除,删掉不能用的那个. 另外,如果几个js同时存在,而有1,2个不能正常运行是,改掉几个的名称,因为有的组件了,js的名称会冲突,最多见的就是jquery. 还有个就			

		

	

				

		

			

                JavaScript Event Loop机制详解与Vue.js中nextTick的实践应用
			

		

		

									

				本文依次介绍了函数调用栈.MacroTask 与 MicroTask 执行顺序.浅析 Vue.js 中 nextTick 实现等内容;本文中引用的参考资料统一声明在 JavaScript 学习与实践资料索引. 1. 事件循环机制详解与实践应用 JavaScript 是典型的单线程单并发语言,即表示在同一时间片内其只能执行单个任务或者部分代码片.换言之,我们可以认为某个同域浏览器上下中 JavaScript 主线程拥有一个函数调用栈以及一个任务队列(参考 whatwg 规范);主线程会依次执行代码			

		

	

				

		

			

                详解利用exif.js解决ios手机上传竖拍照片旋转90度问题_javascript技巧
			

		

		

									

				HTML5+canvas进行移动端手机照片上传时,发现iOS手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,这里主要用到Orientation属性. Orientation属性说明如下: 下面就直接上代码了. 主要有html5页面和一个js,示例功能包含了图片压缩和旋转. 自己写的是uploadImage.js. html5测试页面			

		

	

				

		

			

                详解 WebView 与 JS 交互传值问题
			

		

		

									

				随着混合开发模式比较流行,很多时候,我们需要在原生的基础上,使用 WebView 加载网页,这样控制更加方便.今天我们来看看,如何将 Java 对象 和 List 集合传值给 JS 调用. 如何将 Java 对象实例传值给 JS 其实将我们在 Android 原生中将 Java 对象实例传值给 JS 承认并且可以使用的对象,方法非常简单.我们来举个例子. html 文件 我们在本地写了一个 html 文件,放在 assets 目录中. <!DOCTYPE html> <html>			

		

	

				

		

			

                详解为Angular.js内置$http服务添加拦截器的方法_AngularJS
			

		

		

									

				前言 在Angular框架中,创建团队为使用者进行了Ajax请求的封装,并通过$http服务暴露出相关的接口.Angular在其官方文档中指出, $http服务底层针对Web常见的安全攻击做出了相应的对策,也就是说使用$http服务封装的Ajax为使用者提供了更为安全的保障.作为一个框架,保证框架的可用性,适配性是很有必要的. Angular在设计,实现中也体现出来了这样的良好风格.我们通常在使用Ajax时,有时候希望我们能够在请求发起前或接收到请求后做一些相应的处理工作,比如:在请求发起前,在			

		

	

				

		

			

                Node.js编程中客户端Session的使用详解
			

		

		

									

				  这篇文章主要介绍了Node.js编程中客户端Session的使用详解,是Node.js入门学习中的基础知识,需要的朋友可以参考下 静态网站很容易扩展.你只需要全部缓存,不需要考虑从不同服务器组合有状态的内容给用户. 可惜,大多数Web应用使用有状态的内容提供个性化体验.如果你的应用可以登录,就需要记住用户的Session.经典的处理方法是客户端设置包含随机唯一Session标识的Cookie,被标识的Session数据保存到服务端. 扩展有状态服务 当扩展服务的时候,你肯定有三种选择: 不同			

		

	

				

		

			

                Windows系统下安装Node.js的步骤图文详解_node.js
			

		

		

									

				前言 随着近日Paypal和Netflix宣告 迁移到Node.js, 服务器端Javascript平台已经证明其自身在企业领域的价值. 这对于Node来说是一小步,对于Javascript而言却是一大跨越啊! 来自.NET, Java, PHP, Ruby on Rails和更多技术领域的程序员, 所有游走于服务器端的编码者都会聚集到这个平台上. 作为像 Yahoo, Walmart, 和 Oracle 这样的大玩家入局,, Node 正在甩掉其一直就存在的不成熟和不稳定的坏名声. 在这篇文章			

		

	

				

		

			

                Android WebView使用方法详解 附js交互调用方法_Android
			

		

		

									

				目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用  一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView