經常在網頁上看到轉動的時鍾，待機頁面最常見，心血來潮自己利用Html5的canvas並調用了大量的js代碼做了一個時鍾，可以在需要的地方使用到。雖然不是很酷炫，但是大體的功能已經達到了。后期希望能夠再加以改造改造，
廢話不多說，直接上干貨。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
</head>
<body>
<canvas id="colock" width="200" height="200" >
</canvas>
</body>
</html>
<script type="text/javascript">
function displayTime(){
//獲取當前時間
var now=new Date();
//獲取時分秒
var h=now.getHours();
var m=now.getMinutes();
var s=now.getSeconds();
var c=document.getElementById("colock");
var cxt=c.getContext("2d");
cxt.clearRect(0,0,200,200);
//畫表盤
cxt.beginPath();
cxt.arc(100,100,95,0,2*Math.PI);
cxt.lineWidth="10";
cxt.fillStyle="#e4e6e5";
cxt.fill();
cxt.strokeStyle="#48bd4d";
cxt.stroke();
cxt.closePath();
//畫表心
cxt.beginPath();
cxt.arc(100,100,3,0,2*Math.PI);
cxt.fillStyle="red";
cxt.fill();
cxt.closePath();
//時刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.translate(100,100);
cxt.rotate(30*i*Math.PI/180);
cxt.save();
cxt.lineWidth="3";
cxt.strokeStyle="black";
cxt.stroke();
cxt.beginPath();
cxt.moveTo(0,-90);
cxt.lineTo(0,-80);
cxt.closePath();
cxt.restore();
cxt.translate(0,-75);
cxt.rotate(-30*i*Math.PI/180);
//設置字體樣式
cxt.font = "15px Courier ";
//設置字體填充顏色
cxt.fillStyle ="black";
//從坐標點(50,50)開始繪制文字
if(i==0)
{
cxt.fillText(12, -6, 4);
}
else{
cxt.fillText(i, -6, 4);
}
cxt.restore();
}
//畫分刻度
for(var j=0;j<60;j++){
cxt.save();
cxt.translate(100,100);
cxt.rotate(6*j*Math.PI/180);
cxt.lineWidth="1";
cxt.beginPath();
cxt.strokeStyle="black";
cxt.moveTo(0,-90);
cxt.lineTo(0,-85);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//指針（秒針最長最細，時針最短最粗）
//先根據當前的時間確定秒針的位置
cxt.save();
cxt.translate(100,100);
cxt.rotate(6*s*Math.PI/180);
cxt.lineWidth="1";
cxt.beginPath();
cxt.moveTo(0,-80);
cxt.lineTo(0,-3);
cxt.strokeStyle="red";
cxt.closePath();
cxt.stroke();
cxt.restore();
//確定分針的位置，分針一秒鍾走0.1°
cxt.save();
cxt.translate(100,100);
cxt.rotate(6*m*Math.PI/180);
cxt.rotate(0.1*s*Math.PI/180);
cxt.lineWidth="2";
cxt.beginPath();
cxt.moveTo(0,-65);
cxt.lineTo(0,-3);
cxt.strokeStyle="black";
cxt.closePath();
cxt.stroke();
cxt.restore();
//確定時針的位置，時針一分鍾走0.5°，時針一秒走1/120°
cxt.save();
cxt.translate(100,100);
cxt.rotate(30*h*Math.PI/180);
cxt.rotate(0.5*m*Math.PI/180);
cxt.rotate((1/120)*m*Math.PI/180);
cxt.lineWidth="4";
cxt.beginPath();
cxt.moveTo(0,-45);
cxt.lineTo(0,-3);
cxt.strokeStyle="black";
cxt.closePath();
cxt.stroke();
cxt.restore();
setTimeout(displayTime,1000) /*每過一秒執行一次displayTime*/
}
window.onload = displayTime;
</script>
感興趣的可以試一試哦