最丑的時鐘效果！js canvas時鐘制作方法

更新時間：2016年08月15日 08:51:15 作者：小數(shù)點就是問題

最丑的時鐘效果，這篇文章主要為大家詳細(xì)介紹了js canvas時鐘制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今日就發(fā)個丑丑的時鐘，老實說

有沒有什么調(diào)試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(); 
  
  /*畫圓內(nèi)*/
  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);

  /*時針的函數(shù)*/
  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>

這個鐘重點不在怎么畫，在三角函數(shù)，三角函數(shù)的使用與角度息息相關(guān)，Math.PI是π，Math.sin(),Math.cos()它們都是接受弧度的，所以要

把角度轉(zhuǎn)換成弧度，在畫鐘前要先判斷時鐘的條件，把圓分成60份，每一份代表一個刻度，還有在圓的坐標(biāo)是數(shù)學(xué)里的正方向為準(zhǔn)的，所以

需要把開始坐標(biāo)調(diào)一下，減個90度就可以和時鐘的開始位置一樣了。

在學(xué)canvas前一定要把以前遺忘的數(shù)學(xué)函數(shù)復(fù)習(xí)復(fù)習(xí)一下，不是一些復(fù)雜的算數(shù)就無法做了，canvas的學(xué)習(xí)就是坐標(biāo)的不斷確認(rèn)的，然后連成線

最后畫成圖，這與數(shù)學(xué)里的點到線，線到面一樣的道理。

上面的代碼不難都是使用線條畫的，就是重復(fù)的使用畫線函數(shù)和填充顏色。噢~還有外加了一個聲頻標(biāo)簽使用，達(dá)到時鐘的聲音滴答滴答滴答~

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: