主页 / 网络编程 /

最丑的时钟效果！js canvas时钟制作方法

网络编程 2021-07-04 20:00www.168986.cn编程入门
最丑的时钟效果，这篇文章主要为大家详细介绍了js canvas时钟制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

今日就发个丑丑的时钟，老实说 

有没有什么调试canvas的工具，老是要在浏览器刷新查看效果，好累啊~
 （┬＿┬）

代码 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  body{
   background: #eee;
  }
  canvas{
   background: #fff;
  }
 </style>
</head>
<body>
 <canvas width="800" height="800">你浏览器不支持，请升级...</canvas>
 <audio id="audio" src="1.wav"></audio>
 <script>
  var oAudio=document.getElementById("audio");
  var oCas=document.getElementsByTagName("canvas")[0];
  var cas=oCas.getContext("2d");
  oAudio.ontimeupdate=function(){
   if(oAudio.currentTime>0.1){
    this.pause();
   }
  }
  /渐变颜色/
  var color=cas.createRadialGradient(400,400,10,400,400,200);
   color.addColorS(0,"#f1f4f5");
   color.addColorS(1,"#c5c6c7");
  setInterval(function(){
  oAudio.currentTime=0;
  oAudio.play();
  cas.clearRect(0,0,800,800);
  /画圆框/
  cas.lineWidth=3;
  cas.shadowColor="#888";
  cas.shadowOffsetX=1;
  cas.shadowOddsetY=1;
  cas.shadowBlur=5;
  cas.arc(400,400,200,0,Math.PI2,false);
  cas.strokeStyle=color;
  cas.stroke(); 
  
  /画圆内/
  cas.fillStyle=color;  
  cas.fill();

  /画时刻/
  drawTime();
  function drawTime(){
   var len=8;
   var len1=16;
   cas.strokeStyle="#7f7f7f";
   cas.shadowOffsetX=0;
   cas.shadowOddsetY=0;
   cas.shadowBlur=0;
   cas.beginPath();
   for(var i=0;i<60;i++){
    if(i%5==0){
    cas.moveTo(400+Math.cos(i6Math.PI/180)200,400+Math.sin(i6Math.PI/180)200);
    cas.lineTo(400+(200-len1)Math.cos(i6Math.PI/180),400+(200-len1)Math.sin(i6Math.PI/180));
    }else{
    cas.moveTo(400+Math.cos(i6Math.PI/180)200,400+Math.sin(i6Math.PI/180)200);
    cas.lineTo(400+(200-len)Math.cos(i6Math.PI/180),400+(200-len)Math.sin(i6Math.PI/180));
    }
   }
   cas.stroke(); 
  }

  /画时针/
  
  var date=new Date();
  var h=date.getHours();
  var m=date.getMinutes();
  var s=date.getSeconds();
   /时针/
  needle(h5+5m/60,100,"#579ec5");
  /分针/
  needle(m,130,"#5e717c");
  /秒针/
  needle(s,150,"#1d1e1e");
  
  /圆的中心点/
  cas.fillStyle="#858384";
  cas.beginPath();
  cas.arc(400,400,5,0,2Math.PI,true);
  cas.shadowOffsetX=1;
  cas.shadowOddsetY=1;
  cas.shadowBlur=5;
  cas.fill();
  },1000);

  /时针的函数/
  function needle(t,len,color){
   var angle=Math.PI/180;
   cas.beginPath();
   cas.strokeStyle=color;
   cas.moveTo(400,400);
   cas.lineTo(400+lenMath.cos((t6-90)angle),400+lenMath.sin((t6-90)angle));
   cas.stroke();
  }

 </script>
</body>
</html>

这个钟重点不在怎么画，在三角函数，三角函数的使用与角度息息相关，Math.PI是π，Math.sin(),Math.cos()它们都是接受弧度的，所以要 

把角度转换成弧度，在画钟前要先判断时钟的条件，把圆分成60份，每一份代表一个刻度，还有在圆的坐标是数学里的正方向为准的，所以 

需要把开始坐标调一下，减个90度就可以和时钟的开始位置一样了。 

在学canvas前一定要把以前遗忘的数学函数复习复习一下，不是一些复杂的算数就无法做了，canvas的学习就是坐标的不断确认的，然后连成线 

画成图，这与数学里的点到线，线到面一样的道理。 

上面的代码不难都是使用线条画的，就是重复的使用画线函数和填充颜色。噢~还有外加了一个声频标签使用，达到时钟的声音    滴答滴答滴答~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：又一款js时钟!transform实现时钟效果 下一篇：深入分析javascript中console命令

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by