当前位置:Gxlcms > html代码 > H5实现可缩放的时钟动画

H5实现可缩放的时钟动画

时间:2021-07-01 10:21:17 帮助过:27人阅读

这次给大家带来H5实现可缩放的时钟动画,H5实现可缩放时钟动画的注意事项有哪些,下面就是实战案例,一起来看一下。

废话不多说了,直接给大家贴代码了,具体代码如下所示:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>canvas_time</title>
  6. <style type="text/css">
  7. p {
  8. text-align: center;
  9. margin-top: 250px;
  10. }
  11. #clock {
  12. border: 1px solid #cccccc;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <p>
  18. <canvas id="clock" height="600px" width="600px"></canvas>
  19. </p>
  20. <script type="text/JavaScript" >
  21. var dom = document.getElementById('clock');
  22. var ctx = dom.getContext('2d');
  23. var width = ctx.canvas.width;
  24. var height = ctx.canvas.height;
  25. var r = width / 2;
  26. var rem = width/200;
  27. function drawBackground() {
  28. ctx.save(); //存储当前环境变量;
  29. ctx.translate(r, r); //重置坐标到r,r
  30. ctx.beginPath(); // 起始一条路径
  31. ctx.lineWidth = 10*rem; //设置线宽10;
  32. ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false);
  33. ctx.stroke();
  34. var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定义数组
  35. ctx.font = 18*rem+"px Arial";
  36. ctx.textAlign = "center";
  37. ctx.textBaseline = "middle";
  38. hourNumbers.forEach(function(number, i) {
  39. var rad = 2 * Math.PI / 12 * i;
  40. var x = Math.cos(rad) * (r - 30*rem);
  41. var y = Math.sin(rad) * (r - 30*rem);
  42. ctx.fillText(number, x, y);
  43. });
  44. for (var i = 0; i < 60; i++) {
  45. var rad = 2 * Math.PI / 60 * i;
  46. var x = Math.cos(rad) * (r - 18*rem);
  47. var y = Math.sin(rad) * (r - 18*rem);
  48. ctx.beginPath();
  49. if (i % 5 === 0) {
  50. ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
  51. ctx.fillStyle = "#000";
  52. } else {
  53. ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
  54. ctx.fillStyle = "#ccc";
  55. }
  56. ctx.fill();
  57. }
  58. }
  59. function drawHour(hour, minute) {
  60. ctx.save();
  61. ctx.beginPath();
  62. var rad = 2 * Math.PI / 12 * hour;
  63. var mrad = 2 * Math.PI / 12 / 60 * minute;
  64. ctx.rotate(rad + mrad);
  65. ctx.lineWidth = 6*rem;
  66. ctx.lineCap = "round";
  67. ctx.moveTo(0, 10*rem);
  68. ctx.lineTo(0, -r / 2);
  69. ctx.stroke();
  70. ctx.restore();
  71. }
  72. function drawMinute(minute) {
  73. ctx.save();
  74. ctx.beginPath();
  75. var rad = 2 * Math.PI / 60 * minute;
  76. ctx.rotate(rad);
  77. ctx.lineWidth = 3*rem;
  78. ctx.lineCap = "round";
  79. ctx.moveTo(0, 10*rem);
  80. ctx.lineTo(0, -r + 30*rem);
  81. ctx.stroke();
  82. ctx.restore();
  83. }
  84. function drawSecond(second) {
  85. ctx.save();
  86. ctx.beginPath();
  87. ctx.fillStyle = 'red';
  88. var rad = 2 * Math.PI / 60 * second;
  89. ctx.rotate(rad);
  90. ctx.moveTo(-2*rem, 20*rem);
  91. ctx.lineTo(2*rem, 20*rem);
  92. ctx.lineTo(1, -r + 16*rem);
  93. ctx.lineTo(-1, -r + 16*rem);
  94. ctx.fill();
  95. ctx.restore();
  96. }
  97. function drawDot() {
  98. ctx.beginPath();
  99. ctx.fillStyle = '#fff';
  100. ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);
  101. ctx.fill();
  102. }
  103. function draw01() {
  104. ctx.clearRect(0, 0, width, height);
  105. var now = new Date();
  106. var hour = now.getHours();
  107. var minute = now.getMinutes();
  108. var second = now.getSeconds();
  109. drawBackground();
  110. drawHour(hour, minute);
  111. drawMinute(minute);
  112. drawSecond(second);
  113. drawDot();
  114. ctx.restore();
  115. }
  116. draw01();
  117. setInterval(draw01, 1000);
  118. </script>
  119. </body>
  120. </html>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

H5怎么操作WebSQL数据库

前缀data-属性和dataset的使用方法

H5的拖放功能详解

以上就是H5实现可缩放的时钟动画的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行