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

2019-11-20 09:14:54

字体：大中小

来源：转载

供稿：网友

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

有没有什么调试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.addColorStop(0,"#f1f4f5");   color.addColorStop(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.PI*2,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(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200);    cas.lineTo(400+(200-len1)*Math.cos(i*6*Math.PI/180),400+(200-len1)*Math.sin(i*6*Math.PI/180));    }else{    cas.moveTo(400+Math.cos(i*6*Math.PI/180)*200,400+Math.sin(i*6*Math.PI/180)*200);    cas.lineTo(400+(200-len)*Math.cos(i*6*Math.PI/180),400+(200-len)*Math.sin(i*6*Math.PI/180));    }   }   cas.stroke();   }  /*画时针*/    var date=new Date();  var h=date.getHours();  var m=date.getMinutes();  var s=date.getSeconds();   /*时针*/  needle(h*5+5*m/60,100,"#579ec5");  /*分针*/  needle(m,130,"#5e717c");  /*秒针*/  needle(s,150,"#1d1e1e");    /*圆的中心点*/  cas.fillStyle="#858384";  cas.beginPath();  cas.arc(400,400,5,0,2*Math.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+len*Math.cos((t*6-90)*angle),400+len*Math.sin((t*6-90)*angle));   cas.stroke();  } </script></body></html>

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

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

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

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

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

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

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

上一篇：又一款js时钟!transform实现时钟效果

下一篇：深入分析javascript中console命令