最丑的時鐘效果！js canvas時鐘制作方法
更新時間：2016年08月15日 08:51:15 作者：小數(shù)點就是問題
最丑的時鐘效果，這篇文章主要為大家詳細介紹了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ù)的使用與角度息息相關，Math.PI是π，Math.sin(),Math.cos()它們都是接受弧度的，所以要
把角度轉換成弧度，在畫鐘前要先判斷時鐘的條件，把圓分成60份，每一份代表一個刻度，還有在圓的坐標是數(shù)學里的正方向為準的，所以
需要把開始坐標調(diào)一下，減個90度就可以和時鐘的開始位置一樣了。
在學canvas前一定要把以前遺忘的數(shù)學函數(shù)復習復習一下，不是一些復雜的算數(shù)就無法做了，canvas的學習就是坐標的不斷確認的，然后連成線
最后畫成圖，這與數(shù)學里的點到線，線到面一樣的道理。
上面的代碼不難都是使用線條畫的，就是重復的使用畫線函數(shù)和填充顏色。噢~還有外加了一個聲頻標簽使用，達到時鐘的聲音 滴答滴答滴答~
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
js實現(xiàn)獲取最新本周周一開始的日期（單周日歷卡）
這篇文章主要為大家介紹了js實現(xiàn)獲取最新本周周一開始的日期（單周日歷卡）示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
JavaScript中的純函數(shù)與偏函數(shù)你了解嗎
JS中，純函數(shù)指在相同的輸入下始終產(chǎn)生相同的輸出并且沒有副作用的函數(shù)，偏函數(shù)指一種創(chuàng)建新函數(shù)的方法，通過預設一個或多個參數(shù)從而實現(xiàn)對原始函數(shù)的封裝和定制，本文主要來講講純函數(shù)與偏函數(shù)的一些使用，需要的可以參考一下2023-05-05
這篇文章主要為大家詳細介紹了JS實現(xiàn)長圖上下滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了JS動態(tài)修改iframe高度和寬度的方法,實例分析了javascript操作iframe屬性的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JS尾遞歸的實現(xiàn)方法及代碼優(yōu)化技巧,結合實例形式分析了尾遞歸的原理、JS實現(xiàn)方法及優(yōu)化技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細介紹了微信小程序自定義頂部導航組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript實現(xiàn)的聯(lián)動菜單特效示例
這篇文章主要介紹了JavaScript實現(xiàn)的聯(lián)動菜單特效,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了微信小程序swiper實現(xiàn)滑動放大縮小效果,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
細說JS數(shù)組遍歷的一些細節(jié)及實現(xiàn)
本文主要介紹了細說JS數(shù)組遍歷的一些細節(jié)及實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
JavaScript實現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實例
這篇文章主要介紹了JavaScript實現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實例,LokiJS是一個內(nèi)存數(shù)據(jù)庫,將性能考慮放在第一位,使用JavaScript編寫,需要的朋友可以參考下2014-11-11