利用HTML5的Canvas API可(kě)以完成我們以前意想不到的動畫(huà)效果，以前我們想在網頁上(shàng)放置一個(gè)時(shí)鍾，需要先用flash工具制(zhì)作(zuò)一個(gè)鍾表，并寫上(shàng)複雜的ActionScript代碼，然後載入到頁面中。而HTML5的到來(lái)，我們可(kě)以直接在頁面中使用canvas标簽并配合javascript就可(kě)以完成一個(gè)漂亮的時(shí)鍾。

今天，我們一起來(lái)使用HTML5制(zhì)作(zuò)一個(gè)指針會(huì)走動的時(shí)鍾。

HTML

我們隻需要在html中放置一個(gè)canvas标簽：#clock，寬度和(hé)高(gāo)度都是400px。

HTML5應用之時(shí)鍾

Javascript

我們先來(lái)獲取當前時(shí)間(jiān)：包括時(shí)分秒(miǎo)，确保在打開(kāi)頁面時(shí)能定位指針位置，并且定義好圓點坐(zuò)标和(hé)秒(miǎo)鍾角度變量。

var time = new Date();
var h = time.getHours(); //時(shí)
var m = time.getMinutes(); //分
var s = time.getSeconds(); //秒(miǎo)
h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //時(shí)針 初始位置
var x=200,y=200,sAngle=0; //x y 原點 秒(miǎo)針角度變量

接下來(lái)，我們利用canvas來(lái)繪制(zhì)時(shí)鍾，我們寫一個(gè)函數(shù)draw()，繪制(zhì)刻度，執行(xíng)該函數(shù)一次，則秒(miǎo)針順時(shí)針走動1/60個(gè)圓弧度。

首先，獲取canvas繪圖對象，繪制(zhì)時(shí)鍾刻度。我們将時(shí)鍾（圓）劃分為(wèi)12個(gè)刻度，即每個(gè)刻度代表一個(gè)鍾頭，當然，你(nǐ)也可(kě)以劃分為(wèi)60個(gè)刻度，這樣每個(gè)刻度就代表1分鍾。

function draw(){
    var c=document.getElementById("clock");
    var ctx=c.getContext("2d"); //獲取繪圖對象
    ctx.clearRect(0,0,c.width,c.height); //清除上(shàng)次繪制(zhì)的圖形
    s++;//秒(miǎo)針
 
    ctx.fillStyle = '#fff' //填充白色背景色 
    ctx.fillRect(0,0,c.width,c.height);   //設置畫(huà)布區(qū)域
 
	ctx.save(); //保存當前繪圖狀态
 
    // 時(shí)間(jiān)刻度
    for(var i=0;i<12;i++){ //劃分12刻度
        var angle=(Math.PI*2)/12; //獲得(de)每個(gè)刻度對應的弧度
        ctx.beginPath();//開(kāi)始繪制(zhì)
		ctx.font="12px Arial"; //設置字體(tǐ)
        if(i==0||i==3||i==6||i==9){ //當指向0（12點）、3點、6點、9點時(shí)
             ctx.fillStyle="red"; //刻度為(wèi)紅色
             radius=4; //刻度半徑長4px
        }else{
             ctx.fillStyle="blue"; //刻度為(wèi)藍(lán)色
             radius=3; //刻度半徑長為(wèi)3px
        }
 
        ctx.arc(x,y-100,radius,0,Math.PI*2,true); //畫(huà)圓作(zuò)為(wèi)刻度
        ctx.fill(); //填充路徑
        transform(ctx,x,y,angle,true);  //刻度分布              
    }
    ctx.restore(); //恢複上(shàng)次保存的繪圖狀态
    ...
}

按照上(shàng)面的代碼可(kě)以繪制(zhì)一個(gè)帶刻度的圓盤作(zuò)為(wèi)時(shí)鍾的表盤。接下來(lái)我們繼續在函數(shù)draw()裏寫時(shí)分秒(miǎo)指針的轉動。

function draw(){
	...
    sAngle=(Math.PI*2)/60*s; //秒(miǎo)度
	//時(shí)針轉動
    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();
 
	//秒(miǎo)針轉動
	ctx.save();
	ctx.strokeStyle="#000";
	transform(ctx,x,y,sAngle);  
	sj(ctx,x,y,y-80);
	ctx.restore();
    
    //數(shù)據整理(lǐ)
    if(s%60==0){
		sAngle=0,s=0,m++;
        if(m%12==0){ //每十二分 時(shí)針旋轉一次
            if(m!=0)h++;
            if(m%60==0)m=0;
        }
     	if(h%60==0)h=0; 
    }
}

每調用一次draw(),我們對時(shí)分秒(miǎo)針設置不同的填充顔色和(hé)指針粗細，繪制(zhì)指針，根據弧度轉動指針位置，其中我們調用了自定義函數(shù)trans()和(hé)pointer()。

函數(shù)pointer()用來(lái)繪制(zhì)指針。其中ctx表示canvas對象，x,y是圓點坐(zuò)标，z是指針頭的位置。

function pointer(ctx,x,y,z){
     ctx.beginPath();
     ctx.moveTo(x,y);
     ctx.lineTo(x,z);
     ctx.stroke();
     ctx.fill();
}

函數(shù)transform()用來(lái)旋轉指針。其中ctx表示canvas對象，x,y是圓點坐(zuò)标，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秒(miǎo)鍾（即1000毫秒(miǎo)）執行(xíng)一次draw()。

setInterval("draw()",1000);