canvas動畫時鐘

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 15:37:25

canvas動畫時鐘

canvas動畫時鐘:最近在學(xué)canvas，然后根據(jù)MDN上的例子做了個動畫時鐘（為什么要造個輪子，因為丑。）這是MDN上的例子，怎么說呢，比較復(fù)古吧。首先，找一張時鐘的圖片，就是下面這張了。——來自bigger than bigger的dribbble網(wǎng)站，圖片來源（侵刪）然后就開始用canva

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀canvas動畫時鐘:最近在學(xué)canvas，然后根據(jù)MDN上的例子做了個動畫時鐘（為什么要造個輪子，因為丑。）這是MDN上的例子，怎么說呢，比較復(fù)古吧。首先，找一張時鐘的圖片，就是下面這張了。——來自bigger than bigger的dribbble網(wǎng)站，圖片來源（侵刪）然后就開始用canva

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

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

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

——來自bigger than bigger的dribbble網(wǎng)站，圖片來源（侵刪）

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

在js文件中創(chuàng)建畫布（假設(shè)我們使用的都是現(xiàn)代瀏覽器）。

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

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

//繪制表盤底色
ctx.translate(200, 200); //將坐標原點移到畫布中心
ctx.rotate(-Math.PI/2); //將坐標軸逆時針旋轉(zhuǎn)90度，x軸正方向?qū)?2點方向
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();

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

繪制刻度要用到旋轉(zhuǎn)rotate（變形 Transformations by MDN），小時刻度有12個，相鄰兩個刻度與圓心連線的角度就是Math.PI/6，這里用的是弧度表示，也就是30度。那么我們就用for循環(huán)來畫出小時的刻度。

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);
}

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

var now = new Date(),
 sec = now.getSeconds(),
 min = now.getMinutes(),
 hr = now.getHours();
hr = hr > 12 ? hr - 12 : hr;

那么，時針的位置就是（相對于x軸正方向轉(zhuǎn)過的角度）：

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)); //秒針

最后，最關(guān)鍵的讓指針轉(zhuǎn)動起來，這里要用到的是requestAnimationFrame方法，用來重繪頁面，得到連貫逐幀的動畫，實現(xiàn)最佳的動畫效果。

window.requestAnimationFrame(callback);

這個callback就是我們的繪制時鐘的clock()函數(shù)。需要注意的是每次執(zhí)行完requestAnimationFrame后需要清除畫布，不然出現(xiàn)重疊交錯的現(xiàn)象，我們把它放在clock函數(shù)開始的地方。

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

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

演示地址http://codepen.io/lifeng1893/pen/ALPamR

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

canvas動畫時鐘

推薦度：

點擊下載本文 文檔為doc格式

標簽：動態(tài) 時鐘動態(tài)時鐘

熱門焦點

canvas動畫時鐘

canvas動畫時鐘

canvas動畫時鐘

最新推薦

猜你喜歡

熱門推薦