用canvas繪製乙個簡易時鐘

在見識了html5中canvas的強大，筆者準備製作乙個簡易時鐘。

下面就是成果啦，製作之前我們先分析一下，繪製乙個時鐘需要做哪些準備。

一 、

1.首先這個時鐘分為表盤，指標（時針，分針，秒針）和數字三部分。

2.表盤是個圓，這個簡單。

3.繪製指標時，需要先獲取到系統時間，然後找到時間和角度的關係。

4.然後利用畫圓函式，把起始和終點設為同一角度，即可畫出以圓心為起點的射線（指標）了。

二、

接下來，我們再分析一下，繪製時鐘需要用到的函式。

1.arc(x, y, r, start, stop)

x, y, r : 分別是圓的圓心座標和半徑。

start：起始角，以弧度計

stop : 結束角， 以弧度計

這裡涉及到弧度的問題。角度和弧度的關係式：指標的角度 * math.pi / 180 = 弧度。

三、

現在就剩下如何利用獲取到的系統時間轉化為 函式所需要的角度（弧度）了。

時鐘一圈分為12個小時，60分鐘，60秒。所以30°一小時，6°一分鐘， 6°一秒。

理所應當的 指標的角度 = 時間 * 對應的角度 即可得到我們所需的時間，但是我們這個計算方式是以0°在時鐘的12點鐘為基準的。

而canvas裡的0°的地方是在時鐘的三點鐘方向。（一定要注意這個問題）。

而且以右為x軸，以下為y軸的正方向。

所以還需要減去乙個90 才是我們需要的結果

指標的角度 = 時間 * 對應的角度 - 90

另外 為了模擬真實的時針的走動（即分針走一分鐘，時針也跟著走一點點，而不是走完60分鐘時針才走一格），

只需要在計算時針角度的時候加上分鐘的一半（60/2=30，剛好是時針一格的度數）。

四、上**

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
head
>
<
body
>
<
canvas 
id="can"
>
當前瀏覽器不支援！
canvas
>
<
script
>
varx1 
=300
; 
vary1 
=300
;　　　　　　　　　　　　　　　　　　　　　　　 //時鐘圓心位置
varc 
=document.getelementbyid(
"can");
varca 
=can.getcontext("2d
");c.width 
=400
; c.height 
=400
;　　　　　　　　　　　　　　　　　　　　　　//畫布大小
setinterval(
function
() ,
50)　　　　　　　　　　　　　　　　　　　　　　　　　　　　//讓時鐘走起來
function
rtime(x, y) 
script
>
body
>
html
>

用canvas的arc繪製時鐘

在頁面上加入canvas標籤 body canvas id c1 width 600px height 600px span 不支援canvas瀏覽器 span canvas body js部分 繪製秒的刻度的思路是先用ogc.stroke 迴圈畫60個6 的扇形，將它們拼接成一整個圓，然後用ogc...

Canvas 實現乙個時鐘

使用canvas實現另乙個小時鐘，效果圖如下 前端html canvas not supported 下面是example.js的具體實現 var canvas document.getelementbyid canvas var context canvas.getcontext 2d var f...

使用canvas繪製乙個圓或者圓弧

arc x,y,radius,startangle,endangle,anticlockwise 畫乙個以 x,y 為圓心的以radius為半徑的圓弧 圓 從startangle開始到endangle結束，按照anticlockwise給定的方向 預設為順時針 來生成。arc 函式中表示角的單位是弧...