短視頻app開發，實現一個樸實的Canvas時鐘效果
2021-09-15 15:14:26

短視頻app開發，實現一個樸實的Canvas時鐘效果的相關代碼

1. 設置基本的標簽與樣式：

?

<div?class="clock">
??????<canvas?width="300"?height="300"?id="canvas"></canvas>
????</div>
??????*?{
????????margin:?0;
????????padding:?0;
????????box-sizing:?border-box;
??????}
??????body?{
????????height:?100vh;
????????display:?flex;
????????justify-content:?center;
????????align-items:?center;
????????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);

?

以上就是 短視頻app開發，實現一個樸實的Canvas時鐘效果的相關代碼，更多內容歡迎關注之后的文章

?