JavaScript canvas動(dòng)畫實(shí)現(xiàn)時(shí)鐘效果
本文實(shí)例為大家分享了canvas動(dòng)畫實(shí)現(xiàn)時(shí)鐘效果的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>時(shí)鐘特效</title> </head> <body> <canvas width="150" height="150" id="canvas"></canvas> </body> </html> <script> clock();// 顯示 setInterval(clock,1000);// 每一秒重繪一次,達(dá)到轉(zhuǎn)動(dòng)效果 function clock(){ var now = new Date();// 得到當(dāng)前日期與時(shí)間 var second = now.getSeconds(), min = now.getMinutes(), hour = now.getHours();// 得到時(shí)分秒 hour = hour > 12?hour-12:hour; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.clearRect(0,0,150,150);// 初始化畫布 ctx.save(); ctx.translate(75,75);// 平移坐標(biāo)原點(diǎn) ctx.scale(0.4,0.4);//縮放效果 ctx.rotate(-Math.PI/2);// 將x軸旋轉(zhuǎn)-90 ctx.strokeStyle = 'black'; ctx.fillStyle = 'black'; ctx.lineWidth = 8; ctx.lineCap = 'round'; // 顯示時(shí)針刻度 ctx.save(); ctx.beginPath(); for(var i = 0;i<12;i++) { ctx.rotate(Math.PI/6); ctx.moveTo(100,0); ctx.lineTo(120,0); } ctx.stroke(); ctx.closePath(); ctx.restore();// 恢復(fù) ctx.save(); // 顯示秒針刻度 ctx.beginPath(); ctx.lineWidth = 5; for(var i = 0;i < 60; i++) { if(i % 5 != 0) { ctx.moveTo(117,0); ctx.lineTo(120,0); } ctx.rotate(Math.PI/30);// 轉(zhuǎn)6度 } ctx.stroke(); ctx.closePath(); ctx.restore();// 恢復(fù) ctx.save(); // 繪制時(shí)針 ctx.beginPath(); ctx.rotate((Math.PI / 6)*hour + (Math.PI/360)*min + (Math.PI /21600)*second)//時(shí)針當(dāng)前指向的位置 ctx.lineWidth = 14; ctx.moveTo(-20,0); ctx.lineTo(75,0); ctx.stroke(); ctx.closePath(); ctx.restore();//恢復(fù) ctx.save(); // 繪制分針 ctx.beginPath(); ctx.strokeStyle = 'black'; ctx.lineWidth = 10; ctx.rotate((Math.PI/30)*min + (Math.PI/1800)*second);// 分針當(dāng)前的位置 ctx.moveTo(-28,0); ctx.lineTo(102,0); ctx.stroke(); ctx.closePath(); ctx.restore();//恢復(fù) ctx.save(); // 繪制秒針 ctx.beginPath(); ctx.rotate(Math.PI/30*second); ctx.strokeStyle = '#D40000'; ctx.lineWidth = 6; ctx.moveTo(-30,0); ctx.lineTo(83,0); ctx.stroke(); ctx.closePath(); ctx.restore();//恢復(fù) ctx.save(); //繪制表框 ctx.beginPath(); ctx.lineWidth = 4; ctx.strokeStyle = '#325Fa2'; ctx.arc(0,0,142,0,Math.PI*2,true);//半徑142 ctx.stroke(); ctx.closePath(); ctx.restore()//恢復(fù) ctx.restore()//恢復(fù) } </script>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS格式化字符串的兩種方法(反引號(hào)與String.prototype)
本文一共介紹了兩種實(shí)現(xiàn)方式,使用反引號(hào)或自定義方法實(shí)現(xiàn),需要的朋友可以參考下2023-06-06JavaScript開發(fā)人員的10個(gè)關(guān)鍵習(xí)慣小結(jié)
還在一味沒有目的的編寫JavaScript代碼嗎?那么你就OUT了!讓我們一起來看看小編為大家搜羅的JavaScript開發(fā)人員應(yīng)該具備的十大關(guān)鍵習(xí)慣吧2014-12-12javascript設(shè)計(jì)模式之模塊模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之模塊模式學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02原生js實(shí)現(xiàn)淘寶首頁點(diǎn)擊按鈕緩慢回到頂部效果
本例將實(shí)現(xiàn)這樣的一個(gè)效果:下拉到一定距離后按鈕才顯示出來,鼠標(biāo)放到按鈕上時(shí),按鈕背景會(huì)變成灰色,并且圖標(biāo)變成了文字。點(diǎn)擊按鈕緩慢回到頂部2014-04-04詳解JS去重及字符串奇數(shù)位小寫轉(zhuǎn)大寫
本篇文章主要介紹了詳解JS去重及字符串奇數(shù)位小寫轉(zhuǎn)大寫 ,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-12-12bootstrap table合并行數(shù)據(jù)并居中對(duì)齊效果
這篇文章主要為大家詳細(xì)介紹了bootstrap table合并行數(shù)據(jù)并居中對(duì)齊效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10