教你實現一個樸實的Canvas時鐘效果

摘要：

今天教大家寫一個canvas的時鐘案例，效果可能看起來比較簡單，沒有那些花裡胡哨的。

本文分享自華為雲社群《如何實現一個樸實無華的Canvas時鐘效果》，作者： 北極光之夜。。

一.先看效果：

今天寫一個canvas的時鐘案例。效果可能看起來比較簡單，沒有那些花裡胡哨的，不過，它涉及的canvas知識點是比較多的，初學canvas那是必定要會的。下面手把手帶你快速實現~

二。實現步驟（原始碼在最後）：

1。 設定基本的標籤與樣式：

* {

margin： 0；

padding： 0；

box-sizing： border-box；

}

body {

height： 100vh；

display： flex；

justify-content： center；

align-items： center；

background-color： rgb（204， 204， 204）；

}

。clock {

width： 300px；

height： 300px；

background-color： rgb（15， 15， 15）；

border-radius： 50px；

}

2。 開始js程式碼實現，下面為了易於理解，所以一個功能封裝一個函式：

var canvas = document。getElementById（“canvas”）；

var ctx = canvas。getContext（“2d”）；

3。 先繪製鐘的整體白色底盤：

同時為了後期將旋轉點為。clock的中心的，所以將translate偏移一半的距離。

function drawPanel（） {

ctx。translate（150， 150）；

// 開始繪製

ctx。beginPath（）；

// 畫一個圓

ctx。arc（0， 0， 130， 0， 2 * Math。PI）；

ctx。fillStyle = “white”；

ctx。fill（）；

}

4。繪製時鐘的12位數字：

可知，一個圓上它的x座標為：R * cos（它的角度）， y座標為：R *sin（它的角度）。

同時，因為Math。cos（）與Math。sin（）裡是計算弧度的，所以要轉換。公式：弧度 = 角度 * π / 180

function hourNum（） {

// 存放12個數字

var arr = ［1， 2， 3， 4， 5， 6， 7， 8， 9， 10， 11， 12］；

ctx。beginPath（）；

// 數字的基本樣式

ctx。font = “30px fangsong”；

ctx。textAlign = “center”；

ctx。textBaseline = “middle”；

ctx。fillStyle = “black”；

for （var i = 0； i < arr。length； i++） {

ctx。fillText（

arr［i］，

108 * Math。cos（（（i * 30 - 60） * Math。PI） / 180），

108 * Math。sin（（（i * 30 - 60） * Math。PI） / 180）

）；

}

}

5。 繪製時鐘中心的圓點：

一個灰圓覆蓋一個稍大的黑圓。

function centerDot（） {

ctx。beginPath（）；

ctx。arc（0， 0， 8， 0， 2 * Math。PI）；

ctx。fill（）；

ctx。beginPath（）；

ctx。fillStyle = “gray”；

ctx。arc（0， 0， 5， 0， 2 * Math。PI）；

ctx。fill（）；

}

6。繪製時針：

假設引數 hours 與 minutes 為傳入的當前的時間的小時數與分鐘數。

function hourHand（hours， minutes） {

// 應該旋轉的角度，預設時鐘為指向12點方向。

var radius =

（（2 * Math。PI） / 12） * hours + （（（1 / 6） * Math。PI） / 60） * minutes；

// 儲存當前狀態，為了旋轉後能回到當初狀態。

ctx。save（）；

ctx。beginPath（）；

// 針的寬度

ctx。lineWidth = 5；

// 針頭為圓角

ctx。lineCap = “round”；

ctx。strokeStyle = “black”；

// 旋轉

ctx。rotate（radius）；

// 畫一條線表示時鐘

ctx。moveTo（0， 0）；

ctx。lineTo（0， -50）；

ctx。stroke（）；

// 回到儲存的狀態

ctx。restore（）；

}

7。 同理，繪製分針：

function minuteHand（minutes） {

2 * Math。PI；

var radius = （（2 * Math。PI） / 60） * minutes；

ctx。save（）；

ctx。beginPath（）；

ctx。lineWidth = 3；

ctx。lineCap = “round”；

ctx。strokeStyle = “black”；

ctx。rotate（radius）；

ctx。moveTo（0， 0）；

ctx。lineTo（0， -70）；

ctx。stroke（）；

ctx。restore（）；

}

8。 同理，繪製秒針：

function secondHand（seconds） {

var radius = （（2 * Math。PI） / 60） * seconds；

ctx。save（）；

ctx。beginPath（）；

ctx。lineWidth = 1；

ctx。lineCap = “round”；

ctx。strokeStyle = “red”；

ctx。rotate（radius）；

ctx。moveTo（0， 0）；

ctx。lineTo（0， -90）；

ctx。stroke（）；

ctx。restore（）；

}

9。 封裝一個函式獲取當前時間：

同時函式內部呼叫全部繪製的函式。實現繪製一個完整的時鐘。

function update（） {

var time = new Date（）；

var hours = time。getHours（）；

var minutes = time。getMinutes（）；

var seconds = time。getSeconds（）；

// 儲存canvas狀態，因為繪製底盤時它偏移了

ctx。save（）；

drawPanel（）；

hourNum（）；

secondHand（seconds）；

minuteHand（minutes）；

hourHand（hours， minutes）；

centerDot（）；

// 恢復canvas狀態

ctx。restore（）；

}

update（）；

10。 開啟定時器，時鐘運轉：

setInterval（（） => {

ctx。clearRect（0， 0， canvas。width， canvas。height）；

update（）；

}， 1000）；

三。總結：

上面就是全部內容了，實現並不難，就是對canvas提供的一些方法進行合理的使用，拿來練手是很不錯的。原始碼在我的gitee倉庫直接去下載或者複製獲取 ：https：//gitee。com/aurora-in-winter/blog。git

點選關注，第一時間瞭解華為雲新鮮技術~