zoukankan      html  css  js  c++  java

  • 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> 
  • 相关阅读:
    SVG与HTML、JavaScript的三种调用方式
    求时间段的交集
    iis 搭建ftp
    C#获取MAC地址的几种方法
    c#获取本地IP和MAC地址
    【Web】Javascript、Python、Django模板配合处理URL Encode
    【Django】依赖auth.user的数据库迁移，以及admin用户非交互式创建
    【Linux】debian jessie版本安装1.9 svn
    【日志处理】logstash性能优化配置
    【Linux】apt-get install 怎么阻止弹出框，使用脚本默认自动安装？
  • 原文地址：https://www.cnblogs.com/linyufeng/p/9600702.html
Copyright © 2011-2022 走看看