使用h5 canvas實現(xiàn)時鐘動態(tài)效果的案例？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)來賓免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

canvas 繪制好時鐘界面，使用定時器定時重繪整個canvas，就實現(xiàn)了仿真動態(tài)時鐘的效果。

難點在于：

• 秒鐘刻度和時鐘刻度的繪制

• 整點文字沿著內(nèi)邊圓形環(huán)繞

其中刻度的環(huán)繞并不難計算，文字的環(huán)繞就比較坑爹了，canvas繪制的文字是在繪制坐標之上的（文字基線和對齊方式影響），需要進行偏移的計算，使之文字中點正好落在圓上。
這一步相當?shù)?，由于api中并沒有測量字高的辦法，而使用fontSize，其實也并不是字的準確高度，因此，y坐標+二分之一行高向下偏移，使之垂直居中，卻總是不夠準確的。而x坐標+二分之一行寬向左偏移，使之水平居中，則沒有這個問題，因為api提供了測量行寬的方法。

一切都是因為ctx.measureText(text).width存在，但ctx.measureText(numText).height不存在。打印測量結(jié)果，也只有一個寬度屬性。文檔中說canvas對于繪制文字的支持比較弱，從這一點上看 何止是弱。

直接設(shè)置基線和對齊方式為居中，似乎也存在一定誤差，看起來總不是那么賞心悅目。下面的代碼中兩種方式都寫了。

主要知識點為圓的坐標公式，和三角函數(shù)sin，cos計算。實際上，圓的坐標公式使用的并不多，引入求值反而可能復雜化。

canvas畫時鐘效果的代碼編寫

下面是全部代碼：

說明：

1、clockHelper第一個參數(shù)傳入畫布。第二個參數(shù)傳入時鐘界面的配置對象，包括指針、刻度的顏色、大小等，配置項和clockHelper中的deConfig默認對象是相對的，參考deConfig的屬性傳入?yún)?shù)即可。

2、clockHelper的封裝性略差，僅是基本能用型。但屬性不多，改造應該并不困難。

3、提供了時鐘界面繪制之前和之后的方法，可以在beforeDraw和afterDraw這兩個方法中執(zhí)行自己的邏輯。但是由于事先設(shè)計沒有留出足夠的空白像素，用處不大。只能進行一些簡單的再繪制。比如給鐘面添加色彩、漸變。

感謝各位的閱讀！看完上述內(nèi)容，你們對使用h5 canvas實現(xiàn)時鐘動態(tài)效果的案例大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

文章名稱：使用h5canvas實現(xiàn)時鐘動態(tài)效果的案例-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/dgosig.html