動(dòng)態(tài)時(shí)鐘

這幾天的工作學(xué)習(xí)對(duì)Canvas產(chǎn)生了很高的興趣，拿回JS紅寶書(shū)認(rèn)真又學(xué)了一遍Canvas峦甩，恰巧書(shū)中例子是畫(huà)一個(gè)小鐘藏鹊，但這個(gè)例子非常簡(jiǎn)易而且沒(méi)有動(dòng)畫(huà)效果皮假，由此產(chǎn)生了制作動(dòng)態(tài)時(shí)鐘的想法。

點(diǎn)擊查看demo

如果你也是canvas初學(xué)者衩椒，或許這篇文章對(duì)你有所幫助蚌父。

1.制作canvas標(biāo)簽

<canvas id="drawing" width="460" height="460">您的瀏覽器不支持Canvas，請(qǐng)更換最新的瀏覽器</canvas>

2.獲取canvas上下文

在js中獲取#drawing的上下文

var drawing = document.getElementById("drawing");
var ctx = drawing.getContext("2d");

3.定義時(shí)鐘對(duì)象

這里時(shí)鐘對(duì)象指包括表盤(pán)和上面的數(shù)字毛萌，為了美觀苟弛，表盤(pán)采用內(nèi)外兩個(gè)不同粗細(xì)的同心圓和對(duì)應(yīng)在各個(gè)位置的數(shù)字。
因此時(shí)鐘對(duì)象應(yīng)該具有圓心阁将、內(nèi)外圓半徑膏秫，以及在canvas上繪制表盤(pán)和數(shù)字的方法。

var clock = {
    innerRad :  200,
    outerRad : 220,
    center : [230,230],
    setClock : function(){
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(clock.center[0],clock.center[1],clock.innerRad,0,2*Math.PI,false);
        ctx.stroke();
        ctx.closePath();
        ctx.lineWidth = 18;
        ctx.beginPath();
        ctx.arc(clock.center[0],clock.center[1],clock.outerRad,0,2*Math.PI,false);
        ctx.stroke();
        ctx.closePath();
        ctx.save();
    },
    setNumber : function(){
        ctx.font = "bold 28px Sans-Serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        var pos = [];
        pos[0] = clock.center[0];
        pos[1] = clock.center[1]-clock.innerRad +16; 
        for(var i= 1;i < 13;i++){
            pos = countNexPos(pos,30);
            ctx.fillText(i,pos[0],pos[1]);
        }
    }
}

在setNumber中使用了函數(shù)countNextPos做盅，這個(gè)函數(shù)返回：以clock圓心為原點(diǎn)缤削，參數(shù)pos坐標(biāo)到原點(diǎn)的距離為半徑畫(huà)軸，順時(shí)針旋轉(zhuǎn)theta角度獲得的坐標(biāo)吹榴。后文還會(huì)詳細(xì)說(shuō)到

4.定義表針對(duì)象

繪制時(shí)針亭敢、分針、秒針图筹，均包含表針的長(zhǎng)度帅刀、寬度、表針的坐標(biāo)远剩，當(dāng)然還有在canvas上繪制表針扣溺。因此可以定義一個(gè)構(gòu)造函數(shù)，代碼如下：

function Hand(length,lineWidth){
    this.length = length;
    this.lineWidth = lineWidth;
}
Hand.prototype.setOrigin = function(){
    this.curPos = [];
    this.curPos[0] = clock.center[0];
    this.curPos[1] = clock.center[1] - this.length;
};
Hand.prototype.setPos = function(curPos){
    ctx.beginPath();
    ctx.moveTo(clock.center[0],clock.center[1]);
    ctx.lineWidth = this.lineWidth;
    ctx.lineTo(this.curPos[0],this.curPos[1]);
    ctx.stroke();
    ctx.closePath();
};

時(shí)針?lè)轴樏脶樉鶠镠and的實(shí)例瓜晤，有各自的長(zhǎng)寬和坐標(biāo)锥余，擁有相同的設(shè)置原始坐標(biāo)（setOrgin）和繪制表針（setPos，這個(gè)函數(shù)名字可能取的不夠恰當(dāng)）的方法活鹰。
setOrigin方法的目的是設(shè)置表針均指向表盤(pán)的12數(shù)字時(shí)的坐標(biāo)位置哈恰，這樣便于針對(duì)時(shí)間得到旋轉(zhuǎn)以后的坐標(biāo)只估。

6.重點(diǎn)來(lái)了

怎樣得到表針旋轉(zhuǎn)某個(gè)角度后的坐標(biāo)？

如果你的線(xiàn)性代數(shù)學(xué)的不錯(cuò)的話(huà)着绷，這一節(jié)可以自動(dòng)忽略蛔钙。
問(wèn)題是：

圖一

圖二

function countNexPos(curPos , theta){  //curPos:[x1,y1],theta:角度值
    var nexPos = [];
    nexPos[0] = (curPos[0]-clock.center[0])*Math.cos(theta / 180 * Math.PI) - (curPos[1] - clock.center[1]) * Math.sin(theta / 180 * Math.PI) +clock.center[0];
    nexPos[1] = (curPos[0]-clock.center[0])*Math.sin(theta / 180 * Math.PI) + (curPos[1] - clock.center[1]) * Math.cos(theta / 180 * Math.PI) +clock.center[1];
    return nexPos;
}

搞懂這個(gè)，我相信前文的數(shù)字設(shè)置應(yīng)該就明白了

7.獲取當(dāng)前時(shí)間并設(shè)置時(shí)針表針初始位置

function getNowTime(){
    var date = new Date();
    var time = {
        hour : date.getHours(),
        minu : date.getMinutes(),
        sec : date.getSeconds()
    }
    return time;
}

根據(jù)當(dāng)前時(shí)間估算每個(gè)表針的角度值并獲取坐標(biāo)冗懦。

function setTime(time,handSec,handMinu,handHour){
    var thetaSec = time.sec / 60 * 360;
    var thetaMinu = time.minu / 60 * 360 + thetaSec / 60;
    var thetaHour = time.hour / 12 * 360 + thetaMinu / 12;
    handSec.curPos = countNexPos(handSec.curPos,thetaSec);
    handMinu.curPos = countNexPos(handMinu.curPos,thetaMinu);
    handHour.curPos = countNexPos(handHour.curPos,thetaHour);
}

這就是主要幾個(gè)函數(shù)的編寫(xiě)和作用爽冕，在主程序中定時(shí)調(diào)用對(duì)應(yīng)函數(shù)即可，如下披蕉。

window.onload = function(){
    clock.setClock();
    clock.setNumber();
    var handHour = new Hand(80,7);
    var handMinu = new Hand(150,4);
    var handSec = new Hand(170,1);
    handHour.setOrigin();//將初始坐標(biāo)指向12時(shí)刻
    handMinu.setOrigin();
    handSec.setOrigin();
    var time = getNowTime();
    setTime(time,handSec,handMinu,handHour);
    handSec.setPos();
    handMinu.setPos();
    handHour.setPos();
    setInterval(function(){
        ctx.clearRect(0,0,drawing.width,drawing.height);
        clock.setClock();
        clock.setNumber();
        handSec.curPos = countNexPos(handSec.curPos,360/60);
        handSec.setPos();
        handMinu.curPos = countNexPos(handMinu.curPos,360/3600);
        handMinu.setPos();
        handHour.curPos = countNexPos(handHour.curPos,360/3600/12);
        handHour.setPos();
    },1000);
}

相信這段代碼很淺顯易懂颈畸，完整程序參見(jiàn)github
PS疑問(wèn)，因?yàn)橐宑lock不停動(dòng)起來(lái)没讲，每秒需要擦除之前canvas繪制的表針眯娱，我這里是擦除了整個(gè)canvas，再重新繪制整個(gè)表盤(pán)和數(shù)字爬凑，有什么辦法可以只撤銷(xiāo)之前幾步的繪圖操作或者擦除某一部分（線(xiàn)條而非矩形）呢徙缴？