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

2022-01-30 10:32:05

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

实现效果：


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

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
上一篇：SAP Leonardo重磅亮相，助力企业决胜数字化转型

下一篇：区块链可以减少社会不平等1