這幾天的工作學(xué)習(xí)對Canvas產(chǎn)生了很高的興趣，拿回JS紅寶書認(rèn)真又學(xué)了一遍Canvas，恰巧書中例子是畫一個(gè)小鐘，但這個(gè)例子非常簡易而且沒有動畫效果，由此產(chǎn)生了制作動態(tài)時(shí)鐘的想法。
如果你也是canvas初學(xué)者，或許這篇文章對你有所幫助。
1.制作canvas標(biāo)簽
<canvas id="drawing" width="460" height="460">您的瀏覽器不支持Canvas，請更換最新的瀏覽器</canvas>
2.獲取canvas上下文
在js中獲取#drawing的上下文
var drawing = document.getElementById("drawing");
var ctx = drawing.getContext("2d");
3.定義時(shí)鐘對象
這里時(shí)鐘對象指包括表盤和上面的數(shù)字，為了美觀，表盤采用內(nèi)外兩個(gè)不同粗細(xì)的同心圓和對應(yīng)在各個(gè)位置的數(shù)字。
因此時(shí)鐘對象應(yīng)該具有圓心、內(nèi)外圓半徑，以及在canvas上繪制表盤和數(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)的距離為半徑畫軸，順時(shí)針旋轉(zhuǎn)theta角度獲得的坐標(biāo)。后文還會詳細(xì)說到
4.定義表針對象
繪制時(shí)針、分針、秒針，均包含表針的長度、寬度、表針的坐標(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í)針分針秒針均為Hand的實(shí)例，有各自的長寬和坐標(biāo)，擁有相同的設(shè)置原始坐標(biāo)（setOrgin）和繪制表針（setPos，這個(gè)函數(shù)名字可能取的不夠恰當(dāng)）的方法。
setOrigin方法的目的是設(shè)置表針均指向表盤的12數(shù)字時(shí)的坐標(biāo)位置，這樣便于針對時(shí)間得到旋轉(zhuǎn)以后的坐標(biāo)。
6.重點(diǎn)來了
怎樣得到表針旋轉(zhuǎn)某個(gè)角度后的坐標(biāo)？
如果你的線性代數(shù)學(xué)的不錯(cuò)的話，這一節(jié)可以自動忽略。
問題是：
如上圖，以O(shè)點(diǎn)(a,b)為圓心，r為半徑，A0點(diǎn)（坐標(biāo)已知）旋轉(zhuǎn)theta角度到A1，怎樣獲取A1的坐標(biāo)。
利用向量的辦法即可。
坐標(biāo)單位矢量e1,e2（單位為1，方向分別代表x、y軸，實(shí)際上e頭上應(yīng)該還有個(gè)箭頭），如果e1以原點(diǎn)為圓心順時(shí)針旋轉(zhuǎn)theta后，得到坐標(biāo)如上圖所示，也即（cos theta , sin theta）。同理我們可以得到e2旋轉(zhuǎn)后的坐標(biāo)e1(-sin theta)+e2 (cos theta)，也即（-sin theta , cos theta）.
某點(diǎn)的坐標(biāo)為(x0,y0)可以拆解為x0e1 + y0e2，繞著原單旋轉(zhuǎn)后即x0(e1(cos theta) + e2 (sin theta) ) + y0 ( e1(-sin theta) + e2 * (cos theta) )。化簡一下即可。
如今不是圍繞原點(diǎn)旋轉(zhuǎn)而是圍繞O(a,b)旋轉(zhuǎn)，利用坐標(biāo)系變換即可，在此不贅述了。
最后貼上源代碼：
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ù)的編寫和作用，在主程序中定時(shí)調(diào)用對應(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);
}
相信這段代碼很淺顯易懂，完整程序參見github
PS疑問，因?yàn)橐宑lock不停動起來，每秒需要擦除之前canvas繪制的表針，我這里是擦除了整個(gè)canvas，再重新繪制整個(gè)表盤和數(shù)字，有什么辦法可以只撤銷之前幾步的繪圖操作或者擦除某一部分（線條而非矩形）呢？
