canvas實現簡易時鐘效果

最終效果：

1、設定canvas環境，這一部分比較基礎，不做詳細展開。

var canvas=document.getelementbyid
('mycanvas');
canvas.width
= document.documentelement.clientwidth
*0.75
;canvas.height
=document.documentelement.clientheight
*0.75
;radius = canvas.height/2
-35;var context=canvas.getcontext
("2d");
context.strokestyle
="#000"
;context.linewidth=2
;

2、繪製固定部分

通過分析，我們可以知道，固定部分為大圓，數字，與中心點。大圓與中心點的繪製比較簡單，通過arc函式就能完成。數字部分，我們需要通過計算來得到其座標。假設圓心座標為（a,b），則其x座標為a+cos(angel)*r-c,其y座標為b+sin(angel)*r+c。由於數字在大圓外部，因此需要新增乙個偏移量c。

function drawer(cxt)
}

3、繪製運動部分

通過分析，我們可以發現運動部分即為時針，分針和秒針。首先，我們通過date()物件得到當前時間。三條線段的出發點都在圓心上，因此我們只需要計算另乙個頂點就行。而計算頂點座標，其實和上面計算數字的座標是一樣的，只要知道其角度即可。以最麻煩的時針為例，它會隨著分鐘的改變而產生細小的變化，因此它的公式是angel=(hours-3)*30+(minutes/60)*30，減3的原因是圓的角度是從x軸正方向開始計算的，而我們的1點在逆時針60度方向，因此需要進行偏移。另外，需要注意的是，math.cos()和math.sin()是以弧度計算的，因此要把角度轉換成弧度，角度轉換成弧度的公式為：π/180×角度。因此，我們最後的公式為angle=math.pi/180*((hours-3)*30+(minutes/60)*30)。

function drawerhand(cxt)
var minutes = mydate.getminutes()
;var seconds = mydate.getseconds()
; angle=
math.pi
/180*(
(hours-3)
*30+(minutes/60)
*30);
cxt.moveto
(canvas.width/2
,canvas.height/2
);cxt.lineto
(canvas.width/2
+math.cos
(angle)
*(radius-75)
,canvas.height/2
+math.sin
(angle)
*(radius-75)
);cxt.stroke()
; angle=
math.pi
/180*(
6*minutes-90)
; cxt.moveto
(canvas.width/2
,canvas.height/2
);cxt.lineto
(canvas.width/2
+math.cos
(angle)
*(radius-45)
,canvas.height/2
+math.sin
(angle)
*(radius-45)
);cxt.stroke()
; angle=
math.pi
/180*(
6*seconds-90)
; cxt.moveto
(canvas.width/2
,canvas.height/2
);cxt.lineto
(canvas.width/2
+math.cos
(angle)
*(radius-15)
,canvas.height/2
+math.sin
(angle)
*(radius-15)
);cxt.stroke()
;}

4、設定定時器

function control (
)var loop = setinterval(control,
1000
);

最後，我們設定定時器，時鐘就開始工作了，但要注意，每次重繪的時候，需要把前面的繪製去除。

乙個基於canvas的簡易時鐘效果就完成了。

canvas實現簡易時鐘效果

js 實現簡易時鐘效果

使用canvas實現數字時鐘效果

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

canvas實現簡易時鐘效果

js 實現簡易時鐘效果

使用canvas實現數字時鐘效果

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

相關推薦