canvas實(shí)現(xiàn)鐘表效果
更新時(shí)間：2017年02月13日 08:38:20 作者：marie0119
本文主要分享了canvas實(shí)現(xiàn)鐘表效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
效果如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas畫(huà)鐘表</title>
<style>
body{
background: #fc0;
}
#canvas1{
background: #fff;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400" height="400"></canvas>
<script>
var oC=document.getElementById('canvas1');
var oGC=oC.getContext('2d');
function toDraw(){
var x=200;
var y=200;
var r=150;
oGC.clearRect(0,0,oC.width,oC.height);
var oDate=new Date();
var oHour=oDate.getHours();
var oMinu=oDate.getMinutes();
var oSec=oDate.getSeconds();
var hVal=(-90+oHour*30+oMinu/2)*Math.PI/180;
var mVal=(-90+oMinu*6)*Math.PI/180;
var sVal=(-90+oSec*6)*Math.PI/180;
oGC.beginPath();
for(i=0;i<60;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle='#fff';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth=3;
oGC.beginPath();
for(i=0;i<12;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle='#fff';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth=5;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*10/20,hVal,hVal,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth=3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*14/20,mVal,mVal,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth=1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*17/20,sVal,sVal,false);
oGC.closePath();
oGC.stroke();
}
setInterval(toDraw,1000);
toDraw();
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
微信小程序?qū)崿F(xiàn)購(gòu)物頁(yè)面左右聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物頁(yè)面左右聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
深入理解Canvas模糊問(wèn)題產(chǎn)生的原因與解決辦法
我們?cè)谑褂肅anvas進(jìn)行繪圖時(shí),經(jīng)常會(huì)出現(xiàn)繪制的文字或者圖片比較模糊,這篇文章我們就來(lái)討論一下Canvas模糊問(wèn)題產(chǎn)生的原因與解決辦法吧2024-04-04
這篇文章主要給大家介紹了關(guān)于JavaScript this關(guān)鍵字的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之裝飾者模式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript中常見(jiàn)的七種繼承及實(shí)現(xiàn)
JS的繼承方式在我們面試的時(shí)候經(jīng)常會(huì)被問(wèn)到，所以深入理解js繼承方式以及它們的優(yōu)缺點(diǎn)是非常有必要的。本文為大家整理了JavaScript中常見(jiàn)的七種繼承及實(shí)現(xiàn)，需要的可以參考一下2023-03-03
javascript中的數(shù)據(jù)類型檢測(cè)方法詳解
這篇文章主要介紹了javascript中的數(shù)據(jù)類型檢測(cè)方法,結(jié)合實(shí)例形式分析了javascript數(shù)據(jù)類型并總結(jié)分析了常見(jiàn)的數(shù)據(jù)類型檢測(cè)操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了JavaScript 事件流的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
bootstrap modal+gridview實(shí)現(xiàn)彈出框效果
這篇文章主要介紹了bootstrap modal+gridview實(shí)現(xiàn)彈出框效果，gridview點(diǎn)擊更新彈出填寫信息表單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
javascript跨域總結(jié)之window.name實(shí)現(xiàn)的跨域數(shù)據(jù)傳輸
本文給大家介紹window.name實(shí)現(xiàn)的跨域數(shù)據(jù)傳輸，自己親自實(shí)踐了一下，真的非常好用，特此分享到腳本之家網(wǎng)站供大家參考2015-11-11
JavaScript比較兩個(gè)對(duì)象是否相等的方法
這篇文章主要介紹了JavaScript比較兩個(gè)對(duì)象是否相等的方法,通過(guò)對(duì)js對(duì)象進(jìn)行各方面的比較來(lái)判斷兩個(gè)對(duì)象是否相等,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02