時(shí)鐘實(shí)現(xiàn)

在上一步的點(diǎn)陣數(shù)字的基礎(chǔ)上，實(shí)現(xiàn)一個(gè)粒子時(shí)鐘。將時(shí)鐘實(shí)現(xiàn)的函數(shù)命名為digitTime()，時(shí)鐘實(shí)現(xiàn)由獲取時(shí)間數(shù)據(jù)和渲染時(shí)鐘兩部分組成

【時(shí)間數(shù)據(jù)】

最簡(jiǎn)單的時(shí)鐘形式由兩位的小時(shí)、兩位的分鐘和兩位的秒鐘組成，中間用冒號(hào)隔開(kāi)。通過(guò)日期對(duì)象Date來(lái)獲取當(dāng)前時(shí)間，以及當(dāng)前的小時(shí)、分鐘和秒鐘。但是，最終需要得到的是數(shù)字表示的時(shí)鐘

比如12:02:36的時(shí)間數(shù)據(jù)的表示形式為data[1,2,10,0,2,10,3,6]

【渲染時(shí)鐘】

 獲取到時(shí)間數(shù)據(jù)后，通過(guò)循環(huán)使用renderDigit()來(lái)渲染時(shí)鐘中的每一個(gè)數(shù)字。此時(shí)，有一個(gè)需要改變的地方是arc()函數(shù)中的x坐標(biāo)，否則它們將疊加在一起

 為了將時(shí)鐘數(shù)字表示更加清晰在每個(gè)數(shù)字之間增加一定的間距。每個(gè)數(shù)字的寬度是14(R+1)，假設(shè)data數(shù)組中7個(gè)數(shù)字的索引為index，則每個(gè)數(shù)字的起始X坐標(biāo)可以等于14(R+2)*index

 最后通過(guò)定時(shí)器每間隔一段時(shí)間后更新時(shí)間

當(dāng)前瀏覽器不支持canvas，請(qǐng)更換瀏覽器后再試
 

隨機(jī)拋物線

這節(jié)的隨機(jī)拋物線運(yùn)動(dòng)是下節(jié)粒子動(dòng)畫(huà)的預(yù)備節(jié)。以DOM節(jié)點(diǎn)的投擲碰壁為基礎(chǔ)，利用canvas實(shí)現(xiàn)一個(gè)小球的隨機(jī)拋物線運(yùn)動(dòng)

將小球的運(yùn)動(dòng)拆分為x軸和y軸運(yùn)動(dòng)。x軸做勻速運(yùn)動(dòng)，y軸先做向上的減速運(yùn)動(dòng)，再做向下的加速運(yùn)動(dòng)。當(dāng)小球離開(kāi)畫(huà)布區(qū)域時(shí)，停止定時(shí)器

按鈕
當(dāng)前瀏覽器不支持canvas，請(qǐng)更換瀏覽器后再試

粒子動(dòng)畫(huà)

下面來(lái)實(shí)現(xiàn)粒子動(dòng)畫(huà)。在時(shí)間數(shù)字變化的瞬間，由眾多的粒子組成的新數(shù)字上重復(fù)生成相同的粒子，并且新生成的粒子做隨機(jī)的拋物線運(yùn)動(dòng)

所以，第一步是先要判斷是哪個(gè)或哪些數(shù)字在時(shí)間更新時(shí)發(fā)生了變化。然后，通過(guò)這些變化信息，生成要運(yùn)動(dòng)的小球。在定時(shí)器的運(yùn)行間隔內(nèi)，對(duì)運(yùn)動(dòng)小球的狀態(tài)進(jìn)行更新。最后，對(duì)時(shí)鐘和運(yùn)行的小球進(jìn)行統(tǒng)一渲染

當(dāng)前瀏覽器不支持canvas，請(qǐng)更換瀏覽器后再試
 

源碼查看

公告欄擴(kuò)展

將canvas粒子時(shí)鐘js部分封裝為canvasTime.js，在公告欄添加如下代碼，即可以實(shí)現(xiàn)在公告欄插入時(shí)鐘的效果

當(dāng)前瀏覽器不支持canvas，請(qǐng)更換瀏覽器后再試

關(guān)于“canvas如何實(shí)現(xiàn)粒子時(shí)鐘效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。