效果：http://hovertree.com/texiao/html5/7.htm
代碼如下：
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>HTML5時鐘 - 何問起</title><base target="_blank" />
<link rel="stylesheet" href="http://hovertree.com/texiao/html5/7/clockhovertree.css">
</head>
<body>
<div class="hvtholder">
<canvas id="clockhovertree" width="500" height="500"></canvas>
<div><a href="http://hovertree.com">首頁</a>
<a href="http://hovertree.com/hvtart/bjae/ajlot218.htm">原文</a>
<a href="http://hovertree.com/texiao/">特效</a>
<h3>HTML5時鐘</h3>
</div>
</div>
<script src="http://hovertree.com/texiao/html5/7/clockhovertree.js"></script>
</body>
</html>
其中clockhovertree.js文件代碼如下：
/*
hovetree.com
何問起
HTML5時鐘
*/
var clock = document.getElementById("clockhov" + "ertree");//獲取canvas
var cxt = clock.getContext("2d");//確定是2d畫布
function drawClock(){
cxt.clearRect(0,0,500,500);//清空畫布
var now = new Date();//獲取當前時間
var sec = now.getSeconds();//獲得秒針
var min = now.getMinutes();//獲取分針
var hour = now.getHours();//獲取秒針 24小時式
hour =hour + min/60;
hour = hour>12?hour-12:hour;//把24小時制轉變成12 小時制 三目運算符
//畫出表盤
cxt.lineWidth=10; //畫筆的寬度
cxt.strokeStyle="pink"; //畫筆的顏色
cxt.beginPath();//開始畫
cxt.arc(250,250,200,0,360,false);//圓心的x y值,半徑是200，繪圖從0度到360度。false代表逆時針畫，true代表順時針
cxt.closePath();//結束畫
cxt.stroke();//啟動開始
//畫出時刻度
for(var i=0;i<12;i++){
cxt.save();//保存畫布，開辟新的異次元空間
cxt.lineWidth=10;
cxt.strokeStyle="#ccc";
cxt.translate(250,250);//設置異次元的圓心
cxt.rotate(i*30*Math.PI/180);//設置旋轉角度
cxt.beginPath();//設置路徑
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();//釋放畫布
}
//畫出分刻度
for(var i=0;i<60;i++){
cxt.save();//保存畫布，開辟新的異次元空間
cxt.lineWidth=5; //畫筆的粗細
cxt.strokeStyle="#ccc"; //畫筆的顏色
cxt.translate(250,250);//設置異次元的圓心
cxt.rotate(i*6*Math.PI/180);//設置旋轉角度
cxt.beginPath();//設置路徑
cxt.moveTo(0,-180);//開始的點
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();//釋放畫布
}
//畫出時針
cxt.save();//保存前面的
cxt.lineWidth=10;
cxt.strokeStyle="#ccc";
cxt.translate(250,250);//設置異次元的圓心
cxt.rotate(hour*30*Math.PI/180);//設置旋轉角度
cxt.beginPath();
cxt.moveTo(0,-140);//開始的點
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();//啟動讓線畫出來
cxt.restore();//釋放畫布
//畫出分針
cxt.save();//保存前面的
cxt.lineWidth=5;
cxt.strokeStyle="#ccc";
cxt.translate(250,250);//設置異次元的圓心
cxt.rotate(min*6*Math.PI/180);//設置旋轉角度
cxt.beginPath();
cxt.moveTo(0,-160);//開始的點
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();//啟動讓線畫出來
cxt.restore();//釋放畫布
//畫出秒針
cxt.save();//保存前面的
cxt.lineWidth=3;
cxt.strokeStyle="#f00";
cxt.translate(250,250);//設置異次元的圓心
cxt.rotate(sec*6*Math.PI/180);//設置旋轉角度
cxt.beginPath();
cxt.moveTo(0,-170);//開始的點
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();//啟動讓線畫出來
//美化時針,畫出三針的交叉點
cxt.beginPath();//開啟路徑
cxt.arc(0,0,5,0,360,false);
cxt.closePath();//閉合路徑
//設置填充顏色
cxt.fillStyle="gray";
cxt.fill();
cxt.stroke();
//畫出秒針顏色
cxt.beginPath();//開啟路徑
cxt.arc(0,-150,5,0,360,false);
cxt.fillStyle="gray";
cxt.fill();
cxt.stroke();
cxt.closePath();//閉合路徑
cxt.restore();//釋放畫布
}
drawClock();//解決刷新時停頓的1秒bug
setInterval(drawClock,1000);