今天，咱們一塊兒來使用HTML5製做一個指針會走動的時鐘。html
HTML
咱們只須要在html中放置一個canvas標籤：#clock，寬度和高度都是400px。html5
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5應用之時鐘</title>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
</body>
</html>
Javascript
咱們先來獲取當前時間：包括時分秒，確保在打開頁面時能定位指針位置，而且定義好圓點座標和秒鐘角度變量。java
var time = new Date();
var h = time.getHours(); //時
var m = time.getMinutes(); //分
var s = time.getSeconds(); //秒
h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //時針 初始位置
var x=200,y=200,sAngle=0; //x y 原點 秒針角度變量
接下來，咱們利用canvas來繪製時鐘，咱們寫一個函數draw()，繪製刻度，執行該函數一次，則秒針順時針走動1/60個圓弧度。web
首先，獲取canvas繪圖對象，繪製時鐘刻度。咱們將時鐘（圓）劃分爲12個刻度，即每一個刻度表明一個鐘頭，固然，你也能夠劃分爲60個刻度，這樣每一個刻度就表明1分鐘。canvas
function draw(){
var c=document.getElementById("clock");
var ctx=c.getContext("2d"); //獲取繪圖對象
ctx.clearRect(0,0,c.width,c.height); //清除上次繪製的圖形
s++;//秒針
ctx.fillStyle = '#fff' //填充白色背景色
ctx.fillRect(0,0,c.width,c.height); //設置畫布區域
ctx.save(); //保存當前繪圖狀態
// 時間刻度
for(var i=0;i<12;i++){ //劃分12刻度
var angle=(Math.PI*2)/12; //得到每一個刻度對應的弧度
ctx.beginPath();//開始繪製
ctx.font="12px Arial"; //設置字體
if(i==0||i==3||i==6||i==9){ //當指向0（12點）、3點、6點、9點時
ctx.fillStyle="red"; //刻度爲紅色
radius=4; //刻度半徑長4px
}else{
ctx.fillStyle="blue"; //刻度爲藍色
radius=3; //刻度半徑長爲3px
}
ctx.arc(x,y-100,radius,0,Math.PI*2,true); //畫圓做爲刻度
ctx.fill(); //填充路徑
transform(ctx,x,y,angle,true); //刻度分佈
}
ctx.restore(); //恢復上次保存的繪圖狀態
...
}
按照上面的代碼能夠繪製一個帶刻度的圓盤做爲時鐘的錶盤。接下來咱們繼續在函數draw()裏寫時分秒指針的轉動。函數
function draw(){
...
sAngle=(Math.PI*2)/60*s; //秒度
//時針轉動
ctx.save();
ctx.strokeStyle="red";
ctx.lineWidth=3;
transform(ctx,x,y,(Math.PI*2)/60*h);
sj(ctx,x,y,y-40);
ctx.restore();
//分針轉動
ctx.save();
ctx.strokeStyle="blue";
ctx.lineWidth=2;
transform(ctx,x,y,(Math.PI*2)/60*m);
sj(ctx,x,y,y-68);
ctx.restore();
//秒針轉動
ctx.save();
ctx.strokeStyle="#000";
transform(ctx,x,y,sAngle);
sj(ctx,x,y,y-80);
ctx.restore();
//數據整理
if(s%60==0){
sAngle=0,s=0,m++;
if(m%12==0){ //每十二分 時針旋轉一次
if(m!=0)h++;
if(m%60==0)m=0;
}
if(h%60==0)h=0;
}
}
每調用一次draw(),咱們對時分秒針設置不一樣的填充顏色和指針粗細，繪製指針，根據弧度轉動指針位置，其中咱們調用了自定義函數trans()和pointer()。工具
函數pointer()用來繪製指針。其中ctx表示canvas對象，x,y是圓點座標，z是指針頭的位置。字體
function pointer(ctx,x,y,z){
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,z);
ctx.stroke();
ctx.fill();
}
函數transform()用來旋轉指針。其中ctx表示canvas對象，x,y是圓點座標，angle是轉動角度。動畫
function trans(ctx,x,y,angle){
ctx.transform(Math.cos(angle), Math.sin(angle),
-Math.sin(angle), Math.cos(angle),
x*(1-Math.cos(angle)) + x*Math.sin(angle),
y*(1-Math.cos(angle)) - y*Math.sin(angle))
}
最後，咱們設置每隔1秒鐘（即1000毫秒）執行一次draw()。
setInterval("draw()",1000);