canvas仿iwatch時鐘效果
更新時間：2017年03月06日 16:31:03 作者：shangpudxd
本文主要介紹了canvas仿iwatch時鐘效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
圖（1）
圖（2）
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0; padding:0;}
body{ background:#000; text-align:center;}
canvas{ background:#fff;}
</style>
<script>
function toDou(iNum){
return iNum<10?'0'+iNum:''+iNum;
}
function d2a(n){
return n*Math.PI/180;
}
window.onload = function(){
var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
var cx = oC.width/2,
cy = oC.height/2;
function clock(){
gd.clearRect(0,0,oC.width,oC.height);
var oDate = new Date();
var H = oDate.getHours()%12;
var M = oDate.getMinutes();
var S = oDate.getSeconds();
var MS = oDate.getMilliseconds();
drawArc(60,0,(H*30+M/60*30),'orange');
drawArc(80,0,(M*6+S/60*6),'purple');
drawArc(100,0,(S*6+MS/1000*6),'aqua');
var str = toDou(H)+':'+toDou(M)+':'+toDou(S);
gd.font = '20px 微軟雅黑';
gd.textAlign = 'center';
gd.textBaseline = 'middle';
gd.fillText(str,cx,cy);
}
clock()
setInterval(clock,1);
function drawArc(r,s,e,color){
color = color||'black';
gd.beginPath();
gd.arc(cx,cy,r,d2a(s-90),d2a(e-90),false);
gd.strokeStyle = color;
gd.lineWidth = 20;
gd.stroke();
}
};
</script>
</head>
<body>
<canvas id="c1" width="800" height="600"></canvas>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
微信小程序如何修改本地緩存key中單個數(shù)據(jù)的詳解
這篇文章主要介紹了微信小程序如何修改本地緩存key中單個數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
javascript監(jiān)聽頁面刷新和頁面關(guān)閉事件方法詳解
本文主要介紹了javascript監(jiān)聽頁面刷新和頁面關(guān)閉事件的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章將給大家詳細(xì)介紹一下JavaScript實現(xiàn)模塊的拖拽功能的代碼示例，文中有詳細(xì)的實現(xiàn)步驟,需要的朋友可以參考下2023-07-07
游戲人文件夾程序 ver 3.0...2006-07-07
這篇文章介紹了驗證手機號碼的JS方法，有需要的朋友可以參考一下2013-09-09
JavaScript使用cookie實現(xiàn)記住賬號密碼功能
這篇文章主要介紹了JavaScript使用cookie實現(xiàn)記住賬號密碼功能,本文直接給出完整測試代碼,需要的朋友可以參考下2015-04-04
JavaScript中實現(xiàn)sprintf、printf函數(shù)
這篇文章主要介紹了JavaScript中實現(xiàn)sprintf、printf函數(shù),這兩個函數(shù)在大多數(shù)編程語言中都有,但JS中卻沒有,本文介紹在js中實現(xiàn)這兩個函數(shù)功能,需要的朋友可以參考下2015-01-01
JavaScript實現(xiàn)鼠標(biāo)點擊后層展開效果的方法
這篇文章主要介紹了JavaScript實現(xiàn)鼠標(biāo)點擊后層展開效果的方法,可實現(xiàn)點擊文字緩慢展開層的效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05
WEB開發(fā)之注冊頁面驗證碼倒計時代碼的實現(xiàn)
近期在搞一個H5+backbone 項目,驗證輸入手機號 驗證碼倒計時功能，代碼中包含了前端樣式布局代碼和后端邏輯實現(xiàn)，思路明確，具有參考借鑒價值，需要的朋友參考下吧2016-12-12
這篇文章主要介紹了ES6概念 ymbol.for()方法,需要的朋友可以參考下2016-12-12