Canvas繪製時鐘

首先，找一張時鐘的，就是下面這張了。

——來自bigger than bigger的dribbble**，**（侵刪）

然後就開始用canvas實現這個逼格滿滿的時鐘吧。在html**中插入canvas標籤

<
canvas 
id="canvas"
width
="400"
height
="400"
>
canvas
>

由於瀏覽器對html5標準支援不一致，所以，通常在內部新增一些說明性html**，如果瀏覽器支援canvas，它將忽略內部的html，如果瀏覽器不支援canvas，它將顯示內部的html：

<
canvas 
id="test-stock"
width
="300"
height
="200"
>
<
p>current price: 25.51
p>
canvas
>

在使用canvas前，用canvas.getcontext來測試瀏覽器是否支援canvas：

var canvas = document.getelementbyid('test-canvas');
if (canvas.getcontext) else

在js檔案中建立畫布（假設我們使用的都是現代瀏覽器）。

function
clock()

//
繪製表盤底色
ctx.translate(200, 200); //
將座標原點移到畫布中心
ctx.rotate(-math.pi/2); //將座標軸逆時針旋轉90度，x軸正方向對準12點方向
var lingrad = ctx.createlineargradient(150, 0, -150, 0);
lingrad.addcolorstop(0, '#242f37');
lingrad.addcolorstop(1, '#48585c');
ctx.fillstyle =lingrad;
ctx.beginpath();
ctx.arc(0, 0, 150, 0, math.pi * 2, true
);ctx.fill();

比較關鍵的一點是畫布的座標軸x軸正方向是時鐘3點鐘方向，為了方便起見，我們把它逆時針旋轉90度讓它指向十二點鐘方向。

繪製刻度要用到旋轉rotate（變形 transformations by mdn），小時刻度有12個，相鄰兩個刻度與圓心連線的角度就是math.pi/6，這裡用的是弧度表示，也就是30度。那麼我們就用for迴圈來畫出小時的刻度。

for (var i = 0; i < 12; i++)

同理，分鐘的刻度也一樣。

ctx.beginpath();
for (i = 0; i < 60; i++) 
ctx.rotate(math.pi / 30);
}

表盤大致畫好了，刻度也畫好了，接下來就是繪製指標並讓它指向正確的時間，是不是？不就就是畫一條直線麼。關鍵是指標rotate的角度是多少呢？其實也是比較簡單的。先獲取當前的時間，把小時轉換為12小時制的。

var now = new
date(),
sec =now.getseconds(),
min =now.getminutes(),
hr =now.gethours();
hr = hr > 12 ? hr - 12 : hr;

那麼，時針的位置就是（相對於x軸正方向轉過的角度）：

ctx.rotate(hr * (math.pi / 6) + min * (math.pi / 360) + sec * (math.pi / 21600));

同理，分針和秒針的位置：

ctx.rotate(min * (math.pi / 30) + sec * (math.pi/1800)); //分針
ctx.rotate(sec * (math.pi /30)); //秒針

最後，最關鍵的讓指標轉動起來，這裡要用到的是requestanimationframe方法，用來重繪頁面，得到連貫逐幀的動畫，實現最佳的動畫效果。

window.requestanimationframe(callback);

這個callback就是我們的繪製時鐘的clock()函式。需要注意的是每次執行完requestanimationframe後需要清除畫布，不然出現重疊交錯的現象，我們把它放在clock函式開始的地方。

ctx.clearrect(0, 0, canvas.width, canvas.height);

到這裡，動畫效果圖如下：

Canvas繪製時鐘

canvas自適應圓形時鐘繪製

用canvas的arc繪製時鐘

用canvas繪製乙個簡易時鐘

Canvas繪製時鐘

canvas自適應圓形時鐘繪製

用canvas的arc繪製時鐘

用canvas繪製乙個簡易時鐘

相關推薦