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

這裡還是要說一下我的前端學習群：594959296，從我一個人到現在的1369人都是我每篇文章每個特效聚集的小夥伴，可以說都是我們大前端的學霸啊，不定期分享乾貨。想學到東西的都可以來，歡迎初學和進階中的小夥伴

主要的知識點:

• 狀態保存 context.save()

• 狀態恢復 context.restore()

• 旋轉 context.rotate(弧度)

• 平移 context.translate(x,y) x,y 是需要移動到的目標位置座標

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

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

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

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

效果圖就是這樣：

代碼如下：

學習javascript也是有門檻的，就是你的html和css至少還比較熟練，您不能連html這東東是幹啥的都不知道就開始學javascript了，學乘除前，學好加減法總是有益無害的。

再說二點建議：

1. 不要急著看一些複雜的javascript網頁特效的代碼，這樣除了打擊你的自信心，什麼也學不到

2. 看網上什麼幾天精通javascript的，直接跳過吧，沒戲

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端課程’關注後回覆‘給我資料’可以領取一套完整的學習視頻