這篇文章主要介紹了JavaScript中canvas動畫實現(xiàn)時鐘效果的方法,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)公司,為您提供網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設(shè)計,對服務成都集裝箱等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗。成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報價服務,我們深知市場的競爭激烈,認真對待每位客戶,為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進步,是我們永遠的責任!
<!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>時鐘特效</title> </head> <body> <canvas width="150" height="150" id="canvas"></canvas> </body> </html> <script> clock();// 顯示 setInterval(clock,1000);// 每一秒重繪一次,達到轉(zhuǎn)動效果 function clock(){ var now = new Date();// 得到當前日期與時間 var second = now.getSeconds(), min = now.getMinutes(), hour = now.getHours();// 得到時分秒 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);// 平移坐標原點 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'; // 顯示時針刻度 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();// 恢復 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();// 恢復 ctx.save(); // 繪制時針 ctx.beginPath(); ctx.rotate((Math.PI / 6)*hour + (Math.PI/360)*min + (Math.PI /21600)*second)//時針當前指向的位置 ctx.lineWidth = 14; ctx.moveTo(-20,0); ctx.lineTo(75,0); ctx.stroke(); ctx.closePath(); ctx.restore();//恢復 ctx.save(); // 繪制分針 ctx.beginPath(); ctx.strokeStyle = 'black'; ctx.lineWidth = 10; ctx.rotate((Math.PI/30)*min + (Math.PI/1800)*second);// 分針當前的位置 ctx.moveTo(-28,0); ctx.lineTo(102,0); ctx.stroke(); ctx.closePath(); ctx.restore();//恢復 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();//恢復 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()//恢復 ctx.restore()//恢復 } </script>
1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進行服務器端編程。
感謝你能夠認真閱讀完這篇文章,希望小編分享的“JavaScript中canvas動畫實現(xiàn)時鐘效果的方法”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學習!
網(wǎng)站欄目:JavaScript中canvas動畫實現(xiàn)時鐘效果的方法
標題來源:http://bm7419.com/article16/igicgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計、軟件開發(fā)、全網(wǎng)營銷推廣、外貿(mào)建站、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)