canvas时钟

 

canvas时钟
canvas时钟

 

 

时钟参数
时钟参数

 

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <title>Title</title> 
  6. <style> 
  7. .clock { 
  8. width: 400px; 
  9. margin: 100px auto; 
  10. background: #ddd; 
  11. border-radius: 20px; 
  12. } 
  13. </style> 
  14. </head> 
  15. <body> 
  16. <div class="clock"> 
  17. <canvas id="view" height="400px" width="400px"></canvas> 
  18. </div> 
  19. <script> 
  20. var canvas = document.getElementById('view');//1.获取元素 
  21. var c = canvas.getContext('2d');//2.获取上下文对象 
  22.  
  23. //3.定义基础变量 
  24. var w = h = 400;//时钟宽高 
  25. var x = y = 200;//时钟中心坐标 
  26. var r = 180;//时钟半径 
  27. var r_hour = 60;//时针长度 
  28. var r_minute = 120;//分针长度 
  29. var r_second = 140;//秒针长度 
  30. var r_text = 140;//定义表盘文字的半径 
  31. var r_square = 165;//刻度 
  32. var r_circle = 10;// 表盘小圆点 
  33. var deg = 2 * Math.PI;//定义基本的圆周 
  34.  
  35. //平移中心点 
  36. c.translate(w/2, h/2); 
  37.  
  38. //TODO step2: 画时钟的针 
  39. function clock(){ 
  40. //TODO step1: 画表盘 
  41. drawCircle(0, 0, r, '#fff'); 
  42. //获取真实的时间 
  43. var date = new Date(); 
  44. var hour = date.getHours()*(deg/12) - deg/4;//[0-23] 
  45. var miunte = date.getMinutes()*(deg/60) - deg/4;//[0-59] 
  46. var second = date.getSeconds()*(deg/60) - deg/4;//[0-59] 
  47.  
  48. drawLine(0, 0, r_hour*Math.cos(hour), r_hour*Math.sin(hour), '#000', 10); 
  49. drawLine(0, 0, r_minute*Math.cos(miunte), r_minute*Math.sin(miunte), '#000', 5); 
  50. drawLine(0, 0, r_second*Math.cos(second), r_second*Math.sin(second), '#f00', 2); 
  51.  
  52. //TODO step3: 时钟帽 
  53. drawCircle(0, 0, r_circle, '#000'); 
  54. //TODO step4: 画时钟文字 
  55. for (var i = 1; i <= 12; i++) { 
  56. /** 
  57. * 计算圆周坐标 
  58. * x = x + r*cos(θ) 
  59. * y = y + r*sin(θ) 
  60. * */ 
  61. var θ = i/12 * deg - deg/4; 
  62. var x = r_text*Math.cos(θ); 
  63. var y = r_text*Math.sin(θ); 
  64. drawText(i, x, y); 
  65. } 
  66.  
  67. //TODO step5: 画刻度 
  68. for (var i = 0; i < 60; i++) { 
  69. // 确定起点和终点 
  70. var θ = (deg/60) *i; 
  71. //起点 
  72. var x1 = r * Math.cos(θ); 
  73. var y1= r * Math.sin(θ); 
  74. //终点点 
  75. var x2 = r_square * Math.cos(θ); 
  76. var y2= r_square * Math.sin(θ); 
  77.  
  78. //终点2 
  79. var x3 = (r_square+5) * Math.cos(θ); 
  80. var y3= (r_square+5) * Math.sin(θ); 
  81.  
  82. //画刻度 
  83. if(i%5==0){//如果是整点就长一点 
  84. drawLine(x1, y1, x2, y2, '#aaa', 3); 
  85. }else{//否则短一点 
  86. drawLine(x1, y1, x3, y3, '#ccc', 2); 
  87. } 
  88.  
  89. } 
  90. } 
  91.  
  92. clock();//初始化执行一次 
  93. setInterval(function () { 
  94. c.clearRect(0,0, w, h); 
  95. clock(); 
  96. }) 
  97.  
  98. /****** 
  99. * @func: 写文字 
  100. * */ 
  101. function drawText(text, x, y) { 
  102. c.font = 'bold 26px 微软雅黑'; 
  103. c.fillStyle = '#000'; 
  104. c.textAlign = 'center'; 
  105. c.textBaseline = 'middle'; 
  106. c.fillText(text, x, y); 
  107. } 
  108.  
  109. /*** 
  110. * @func: 画直线 
  111. * */ 
  112. function drawLine(x1, y1, x2, y2, color, width) { 
  113. c.beginPath(); 
  114. c.moveTo(x1, y1); 
  115. c.lineTo(x2, y2); 
  116. c.strokeStyle = color; 
  117. c.lineWidth = width; 
  118. //让指针头变圆 
  119. c.lineCap = 'round';//变圆 
  120. c.stroke(); 
  121. c.closePath(); 
  122. } 
  123.  
  124. /*** 
  125. * @func: 画圆 
  126. * */ 
  127. function drawCircle(x, y, r, color){ 
  128. c.beginPath(); 
  129. c.arc(x, y, r, 0, Math.PI*2); 
  130. c.fillStyle = color; 
  131. c.fill(); 
  132. c.closePath(); 
  133. } 
  134. </script> 
  135. </body> 
  136. </html> 
posted @ 2018-09-06 20:20  林宇风  阅读(341)  评论(0)  编辑  收藏  举报