会飞的鱼

HTML5个性圆弧时钟动画特效源码

HTML5个性圆弧时钟动画特效是一款html5基于canvas绘制酷炫发光的圆弧线条走动时钟动画特效

效果:

源码:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTML5个性圆弧时钟动画特效</title>
  6.  
  7. <style>
  8. body {
  9. background-color:black;
  10. }
  11. </style>
  12.  
  13. </head>
  14. <body>
  15.  
  16. <center><canvas id="canvas" width="500" height="500" >cccc</canvas></center>
  17.  
  18. <script>
  19. var canvas = document.getElementById("canvas");
  20. var ctx = canvas.getContext("2d");
  21.  
  22. ctx.strokeStyle = '#00ffff';
  23. ctx.lineWidth = 17;
  24. ctx.shadowBlur = 15;
  25. ctx.shadowColor = '#00ffff'
  26.  
  27. function degToRad(degree) {
  28. var factor = Math.PI / 180;
  29. return degree * factor;
  30. }
  31.  
  32. function renderTime() {
  33. var now = new Date();
  34. var today = now.toDateString();
  35. var time = now.toLocaleTimeString();
  36. var hrs = now.getHours();
  37. var min = now.getMinutes();
  38. var sec = now.getSeconds();
  39. var mil = now.getMilliseconds();
  40. var smoothsec = sec + (mil / 1000);
  41. var smoothmin = min + (smoothsec / 60);
  42.  
  43. //Background
  44. gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
  45. gradient.addColorStop(0, "#03303a");
  46. gradient.addColorStop(1, "black");
  47. ctx.fillStyle = gradient;
  48. //ctx.fillStyle = 'rgba(00 ,00 , 00, 1)';
  49. ctx.fillRect(0, 0, 500, 500);
  50. //Hours
  51. ctx.beginPath();
  52. ctx.arc(250, 250, 200, degToRad(270), degToRad((hrs * 30) - 90));
  53. ctx.stroke();
  54. //Minutes
  55. ctx.beginPath();
  56. ctx.arc(250, 250, 170, degToRad(270), degToRad((smoothmin * 6) - 90));
  57. ctx.stroke();
  58. //Seconds
  59. ctx.beginPath();
  60. ctx.arc(250, 250, 140, degToRad(270), degToRad((smoothsec * 6) - 90));
  61. ctx.stroke();
  62. //Date
  63. ctx.font = "25px Helvetica";
  64. ctx.fillStyle = 'rgba(00, 255, 255, 1)'
  65. ctx.fillText(today, 175, 250);
  66. //Time
  67. ctx.font = "25px Helvetica Bold";
  68. ctx.fillStyle = 'rgba(00, 255, 255, 1)';
  69. ctx.fillText(time + ":" + mil, 175, 280);
  70.  
  71. }
  72. setInterval(renderTime, 40);
  73. </script>
  74.  
  75. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
  76. <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
  77. </div>
  78. </body>
  79. </html>



版权所有,转载注意明处:九麦网 » HTML5个性圆弧时钟动画特效源码

发表评论

表情

网友评论(0)

sitemap