腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

最丑的時(shí)鐘效果！js canvas時(shí)鐘制作方法

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

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

今日就發(fā)個(gè)丑丑的時(shí)鐘，老實(shí)說(shuō)

有沒(méi)有什么調(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">你瀏覽器不支持，請(qǐng)升級(jí)...</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);
  /*畫(huà)圓框*/
  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(); 
  
  /*畫(huà)圓內(nèi)*/
  cas.fillStyle=color;  
  cas.fill();

  /*畫(huà)時(shí)刻*/
  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(); 
  }

  /*畫(huà)時(shí)針*/
  
  var date=new Date();
  var h=date.getHours();
  var m=date.getMinutes();
  var s=date.getSeconds();
   /*時(shí)針*/
  needle(h*5+5*m/60,100,"#579ec5");
  /*分針*/
  needle(m,130,"#5e717c");
  /*秒針*/
  needle(s,150,"#1d1e1e");
  
  /*圓的中心點(diǎn)*/
  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í)針的函數(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>

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

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

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

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

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

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

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

您可能感興趣的文章: