快捷導(dǎo)航

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)文章

bootstrap制作jsp頁(yè)面（根據(jù)值讓table顯示選中）
這篇文章主要為大家詳細(xì)介紹了bootstrap做的jsp頁(yè)面,根據(jù)值讓table顯示選中，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
前端報(bào)錯(cuò)Failed?to?resolve?component:?smile-outlined?If?thi
這篇文章主要為大家介紹了前端報(bào)錯(cuò)?Failed?to?resolve?component:?smile-outlined?If?this?is?a?native?custom?的問(wèn)題分析解決，有需要的朋友可以借鑒參考下
2023-06-06
javascript之通用簡(jiǎn)單的table選項(xiàng)卡實(shí)現(xiàn)(二)
上篇中的選項(xiàng)卡存在這樣的問(wèn)題：把邏輯封裝在table.js中，不夠靈活，也就是說(shuō)如果某個(gè)選項(xiàng)卡是實(shí)現(xiàn)異步請(qǐng)求或者跳轉(zhuǎn)，而非div的顯隱切換，那么就得修過(guò)table.js來(lái)達(dá)到目的，顯然不是我所需要的。
2010-05-05
微信小程序組件化開(kāi)發(fā)的示例介紹
雖然小程序在剛推出時(shí)是不支持組件化的,但如今小程序開(kāi)始支持自定義組件開(kāi)發(fā),下面這篇文章主要給大家介紹了關(guān)于微信小程序組件化開(kāi)發(fā)的相關(guān)資料,需要的朋友可以參考下
2023-03-03
使用layui+ajax實(shí)現(xiàn)簡(jiǎn)單的菜單權(quán)限管理及排序的方法
今天小編就為大家分享一篇使用layui+ajax實(shí)現(xiàn)簡(jiǎn)單的菜單權(quán)限管理及排序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
javascript多物體運(yùn)動(dòng)實(shí)現(xiàn)方法分析
這篇文章主要介紹了javascript多物體運(yùn)動(dòng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JavaScript多物體運(yùn)動(dòng)的相關(guān)注意事項(xiàng)與具體實(shí)現(xiàn)代碼,包含四個(gè)div塊的橫向、豎向移動(dòng),顏色與邊框漸變效果,需要的朋友可以參考下
2016-01-01
JavaScript中判斷整數(shù)的多種方法總結(jié)
這篇文章主要介紹了JavaScript中判斷整數(shù)的多種方法總結(jié),本文總結(jié)了5種判斷整數(shù)的方法,如取余運(yùn)算符判斷、Math.round、Math.ceil、Math.floor判斷等,需要的朋友可以參考下
2014-11-11
javascript實(shí)現(xiàn)數(shù)字驗(yàn)證碼的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript實(shí)現(xiàn)數(shù)字驗(yàn)證碼的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
JavaScript數(shù)組方法的錯(cuò)誤使用例子
在本篇文章中我們給大家分享了幾種使用JavaScript數(shù)組容易出錯(cuò)的例子，需要的朋友們可以參考下。
2018-09-09
JS獲取短信驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS獲取短信驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2017-05-05