使用canvas實現簡單的時鐘效果

這次要借助canvas實現時鐘效果，展示當前時間，形狀為圓形。

完整實現效果截圖如上

時鐘效果的實現主要分為3部分

1、繪製表盤、大小刻度、1~12 等靜態部分的繪製

2、展示當前時間

3、時針、分針和秒針動起來

首先得到canvas和canvas的繪圖環境

var canvas=document.getelementbyid("canvas");

var context=canvas.getcontext("2d");

繪製表盤

繪製乙個圓作為表盤

context.arc(100,100,95,0,2*math.pi,false)

context.stroke();

繪製刻度

一般的時鐘有12個較大的刻度和48個較小的刻度。

可以將刻度理解為 在大小兩個同心圓間，從小圓向大圓畫線。

以繪製12個較大刻度為例。相鄰的大刻度間的夾角為30°

//已知圓心，半徑、角度求圓上某一點的座標，圓心座標（x0,y0）,半徑r,角度a0

x1   =   x0   +   r   *   cos(a0   *   3.14   /180   ) 
y1   =   y0   +   r   *   sin(a0   *   3.14   /180   )

確定大刻度的長度，求出另一點的座標，連線兩點，完成乙個大刻度的繪製。

moveto(x0,y0);

lineto(x1,y1);

其他大刻度以及48個小刻度的繪製思路與之相同，在此不做贅述。

繪製1~12

我們知道，1~12均勻分布在表盤上，相鄰數字間的角度為30°。與刻度不同的是，刻度可以通過繪製線段實現。1~12的繪製則需借助文字繪製方法。

canvas 提供了專門的文字繪製方法filltext()、stroketext()。

這兩個方法均有4個引數：要繪製的文字字串、x座標、y座標和可選的最大畫素寬度。

具體實現與刻度的繪製相似。不做贅述。

讓時針、分針和秒針指向當前的時分秒即可。

繪製時針

時針、分針和秒針的繪製與刻度的繪製相似，不做贅述。

展示當前時間

首先需要獲取當前時間並得到小時數、分鐘數和秒數。

var time=new date();

var hour=time.gethour()%12;
var minute=time.getminutes()%60;
var second=time.getseconds()%60;

假設得到的hour為5，表示現在是5點。如何讓上面繪製的時針指向數字5呢？

canvas提供了方法rotate()，引數為弧度，可以將旋轉一定角度

需要轉過的角度為5*（360/12）=150°

轉過的弧度 150°*(math.pi/180)= (5*math.pi)/6   
contxt.rotate( (5*math.pi)/6);

這樣時針就指向數字5了，分針和秒針執行相同操作就能顯示當前時間了。

動態顯示當前時間

已經可以顯示當前時間了，但是如何讓鐘錶動起來呢?

我們知道，鐘錶指標的位置改變，表示時間的變化，普通鐘錶以秒為最小單位。所以每一秒讓時針、分針和秒針重新指向新的時間點即可。

每秒獲取一次當前時間，得到需要旋轉的角度，重新繪製時針、分針和秒針 。這樣就能看到指標動起來了

為了讓時鐘動起來，我們每秒獲取一次當前時間，根據得到小時數、分鐘數和秒數決定對應的指標旋轉的角度。

那麼，問題來了------ 假設得到的當前小時數是5，也就是現在是5點，在接下來的60分鐘3600秒內，小時數一直為5，但是如果按照上面說到的時間展示方式，在這3600秒內，時針始終指向數字5。這是不對的，我們知道隨著時間變化，時針的位置是會改變的。

-----

假設現在是5小時20分鐘30秒。

那麼，時針需要旋轉的角度

（（20*60+30）/3600）*30°

本文中，時間的改變以秒為單位，每個小時時針總共旋轉30°， 每小時3600秒。

那麼同理，分針需要旋轉的角度

20*6°+（30/60）*6°

每一分鐘，分針總共旋轉6°，每分鐘60s

這裡

使用canvas實現數字時鐘效果

canvas id canvas canvas script function cxt.fillstyle f00 cxt.fillrect 10,10,50,50 cxt.strokestyle 0f0 儲存時間資料 vardata 儲存運動的小球 varballs 設定粒子半徑 varr can...

canvas實現動畫時鐘

實現效果如下 1.建立canvas元素 沒有金剛鑽就不要攬瓷器活2.繪製雙圓 var drawing document.getelementbyid drawing if drawing.getcontext 3.繪製刻度 繪製刻度 context.font bold 14px arial cont...

canvas實現簡易時鐘效果

最終效果 1 設定canvas環境，這一部分比較基礎，不做詳細展開。var canvas document.getelementbyid mycanvas canvas.width document.documentelement.clientwidth 0.75 canvas.height doc...