天給大家用canvasu做一個(gè)時(shí)鐘，希望大家自己也能夠多練練，學(xué)習(xí)需要案例的積累。文章的代碼自己可以拿去練習(xí)下。

這里還是要說(shuō)一下我的前端學(xué)習(xí)群：594959296，從我一個(gè)人到現(xiàn)在的1369人都是我每篇文章每個(gè)特效聚集的小伙伴，可以說(shuō)都是我們大前端的學(xué)霸啊，不定期分享干貨。想學(xué)到東西的都可以來(lái)，歡迎初學(xué)和進(jìn)階中的小伙伴

主要的知識(shí)點(diǎn):

• 狀態(tài)保存 context.save()

• 狀態(tài)恢復(fù) context.restore()

• 旋轉(zhuǎn) context.rotate(弧度)

• 平移 context.translate(x,y) x,y 是需要移動(dòng)到的目標(biāo)位置坐標(biāo)

• 縮放 context.scale(1.5,1.5) 1.5,1.5 是縮放比例, 將原來(lái)的畫(huà)布放大1.5倍

• 畫(huà)圓弧 context.arc(x,y,r,初始弧度, 最終弧度)

• 清空矩形內(nèi)容context.clearRect(x,y,width,height)

• 時(shí)間(時(shí),分,秒)的角度換算

效果圖就是這樣：

代碼如下：

學(xué)習(xí)javascript也是有門(mén)檻的，就是你的html和css至少還比較熟練，您不能連html這東東是干啥的都不知道就開(kāi)始學(xué)javascript了，學(xué)乘除前，學(xué)好加減法總是有益無(wú)害的。

再說(shuō)二點(diǎn)建議：

1. 不要急著看一些復(fù)雜的javascript網(wǎng)頁(yè)特效的代碼，這樣除了打擊你的自信心，什么也學(xué)不到

2. 看網(wǎng)上什么幾天精通javascript的，直接跳過(guò)吧，沒(méi)戲

如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗(yàn)可以關(guān)注我的微信公眾號(hào)：‘web前端課程’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻

款基于HTML5和CSS3的圓盤(pán)時(shí)鐘動(dòng)畫(huà)，它的特點(diǎn)是圓盤(pán)時(shí)鐘側(cè)邊帶有實(shí)時(shí)更新的數(shù)字時(shí)鐘，而且時(shí)鐘在走動(dòng)時(shí)還會(huì)發(fā)出滴答滴答的聲音。

效果圖

代碼：

JavaScript代碼：

頁(yè)面布局：

css樣式：