canvas動畫時鐘

GHOST_349178 發布于2019-08-21 14:44 / 2835人閱讀

摘要：最近在學，然后根據上的例子做了個動畫時鐘為什么要造個輪子，因為丑。。首先，找一張時鐘的圖片，就是下面這張了。那么我們就用循環來畫出小時的刻度。這個就是我們的繪制時鐘的函數。到這里，動畫時鐘就了效果圖如下演示地址地址

最近在學canvas，然后根據MDN上的例子做了個動畫時鐘~~（為什么要造個輪子，因為丑。。）~~

這是MDN上的例子，怎么說呢，比較復古吧。

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

——來自bigger than bigger的dribbble網站，圖片來源（侵刪）

然后就開始用canvas實現這個逼格滿滿的時鐘吧。在html代碼中插入canvas標簽

在js文件中創建畫布（假設我們使用的都是現代瀏覽器）。

function clock() {
  var ctx = document.getElementById("canvas").getContext("2d");
}

先來繪制時鐘表盤，我們看到這張圖是帶有光線陰影效果的，畫成一樣難度太高。于是就用顏色的漸變來讓時鐘看起來稍微立體一點。在canvas中用createLinearGradient來創建一個新的漸變，并用addColorStop上色，最后把顏色賦給strokeStyle。詳見運用樣式與顏色 by MDN

//繪制表盤底色
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();
  ctx.strokeStyle = "#fff";
  ctx.lineWidth = 3;
  ctx.rotate(Math.PI / 6);
  ctx.moveTo(140, 0);
  ctx.lineTo(120, 0);
  ctx.stroke();
}

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

ctx.beginPath();
for (i = 0; i < 60; i++) {
  if (i % 5 !== 0) { //去掉與小時刻度重疊的部分
    ctx.beginPath();
    ctx.strokeStyle = "#536b7a";
    ctx.lineWidth = 2;
    ctx.moveTo(140, 0);
    ctx.lineTo(130, 0);
    ctx.stroke();
  }
  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);

到這里，動畫時鐘就OK了效果圖如下：

Codepen演示地址

Github地址

GPU云服務器云服務器 html5動畫時鐘 html5時鐘動畫 Canvas _canvas

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88020.html

circle_clock 簡單canvas實現圓弧時鐘

摘要：渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關于如何開發一個圓形時鐘條吧使用這次就沒有采用的方法來實現圓環了因為我想要做多層嵌套的圓環覺渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...

boredream 2019-08-29 11:18 評論0 收藏0
circle_clock 簡單canvas實現圓弧時鐘

摘要：渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關于如何開發一個圓形時鐘條吧使用這次就沒有采用的方法來實現圓環了因為我想要做多層嵌套的圓環覺渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...

寵來也 2019-08-01 15:42 評論0 收藏0
circle_clock 簡單canvas實現圓弧時鐘

摘要：渣渣成品圖最近對于圓形有種特別的感情呢因為寫了個就像到了用來做時鐘大概會比較有趣吧所以就著手寫了個這樣的一個東西大概代碼上錯漏還是蠻多的接下來分享下關于如何開發一個圓形時鐘條吧使用這次就沒有采用的方法來實現圓環了因為我想要做多層嵌套的圓環覺渣渣成品圖:http://codepen.io/thewindswor... 最近對于圓形有種特別的感情呢...因為寫了個cricle_proce...

paney129 2019-08-22 10:38 評論0 收藏0
使用Canvas繪制簡單的時鐘控件

摘要：有了，我們就再也不需要了，直接使用完成繪制。繪制原點開始時鐘開始時鐘我們將當前時間繪制到始終上面即可需要注意的是，在繪制之前需要將之前繪制的東西清除掉。Canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動畫等。沒有Canvas的年代，繪圖只能借助Flash插件實現，頁面不得不用JavaScript和Flash進行交互。有了Canvas，我們就...

trilever 2019-04-23 11:50 評論0 收藏0