使用js和canvas實(shí)現(xiàn)時鐘效果
使用js和canvas寫一個時鐘，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>`<html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body> <canvas id=’canvas’ width=’600’ height=’600’ style='border: 1px solid red;'></canvas> <script> /** @type {HTMLCanvasElement} */ let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); let deg = Math.PI / 180; let HourR = 100; let MinutesR = 135; let SecondsR = 170; setInterval(function () { canvas.width = canvas.width; ctx.arc(300, 300, 200, 0, Math.PI * 2) ctx.fillStyle = ’rgba(10,100,30,0.2)’ ctx.strokeStyle = ’red’ //獲取當(dāng)前時間 let dt = new Date() let Hour = dt.getHours() let Minutes = dt.getMinutes() let Seconds = dt.getSeconds() //時鐘 ctx.moveTo(300, 300); let xx = HourR * (Math.sin(Hour * 30 * deg)) let yy = HourR * (Math.cos(Hour * 30 * deg)) ctx.lineTo((300 + xx), (300 - yy)) //分鐘和秒鐘 function move(time, R) {ctx.moveTo(300, 300);xx = R * (Math.sin(time * 6 * deg))yy = R * (Math.cos(time * 6 * deg))ctx.lineTo((300 + xx), (300 - yy)) } //小時指針 for (let m = 0; m < 12; m++) {let xx = 190 * (Math.sin(m * 30 * deg))let yy = 190 * (Math.cos(m * 30 * deg))let xx1 = 200 * (Math.sin(m * 30 * deg))let yy1 = 200 * (Math.cos(m * 30 * deg))ctx.moveTo((300 + xx), (300 - yy));ctx.lineTo((300 + xx1), (300 - yy1)) } move(Seconds, SecondsR) move(Minutes, MinutesR) ctx.fill() ctx.stroke() }, 1000) </script></body></html>
更多JavaScript時鐘特效點(diǎn)擊查看：JavaScript時鐘特效專題
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 在Android中使用WebSocket實(shí)現(xiàn)消息通信的方法詳解2. 淺談python出錯時traceback的解讀3. Python importlib動態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼4. python matplotlib:plt.scatter() 大小和顏色參數(shù)詳解5. windows服務(wù)器使用IIS時thinkphp搜索中文無效問題6. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向7. Nginx+php配置文件及原理解析8. 利用promise及參數(shù)解構(gòu)封裝ajax請求的方法9. .NET中l(wèi)ambda表達(dá)式合并問題及解決方法10. JSP數(shù)據(jù)交互實(shí)現(xiàn)過程解析
網(wǎng)公網(wǎng)安備