<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #demo { display: block; border: 1px solid #999; margin: auto; } </style> </head> <body> <canvas id="demo" height="500" width="500"></canvas> <script> // 1.获取canvas节点 /** @type {HTMLCanvasElement} */ let canvas = document.querySelector("#demo"); // 2.创建执行上下文 let pen = canvas.getContext("2d") let long = 5; let deg = Math.PI / 180 // pen.moveTo(250+200,250); // pen.lineTo(250+200-long,250) function sc(){ pen.beginPath() pen.arc(250, 250, 200, 0, 360 * deg); pen.strokeStyle="#999"; pen.stroke() } // 刻度 function ked(){ for (let i = 0; i < 60; i++) { if (i%5==0) { pen.beginPath(); pen.moveTo(250 + 200 * Math.cos(i * 6 * deg), 250 + 200 * Math.sin(i * 6 * deg)); pen.lineTo(250 + 190 * Math.cos(i * 6 * deg), 250 + 190 * Math.sin(i * 6 * deg)); pen.strokeStyle="#000"; pen.stroke(); } else{ pen.beginPath() pen.moveTo(250 + 200 * Math.cos(i * 6 * deg), 250 + 200 * Math.sin(i * 6 * deg)); pen.lineTo(250 + 195 * Math.cos(i * 6 * deg), 250 + 195 * Math.sin(i * 6 * deg)); pen.strokeStyle="#999"; pen.stroke() } } } // 秒针 function mz(){ let s=new Date(); s=s.getSeconds(); // console.log(s); pen.beginPath(); pen.moveTo(250 + 160 * Math.cos(s*6 * deg-90*deg), 250 + 160 * Math.sin(s*6 * deg-90*deg)); pen.lineTo(250 , 250 ); pen.strokeStyle="#000"; pen.stroke(); } // 分针 function fz(){ let s=new Date(); s=s.getSeconds(); let f=new Date(); f=f.getMinutes(); // console.log(f); pen.beginPath(); pen.moveTo(250 + 120 * Math.cos((f+s/60)*6 * deg-90*deg), 250 + 120 * Math.sin((f+s/60)*6 * deg-90*deg)); pen.lineTo(250 , 250 ); pen.lineWidth=3 pen.strokeStyle="#000"; pen.stroke(); } // 时针 function sz(){ let f=new Date(); f=f.getMinutes(); let h=new Date(); h=h.getHours(); pen.beginPath(); pen.moveTo(250 + 90 * Math.cos(30*(h+f/60) * deg-90*deg), 250 + 90 * Math.sin(30*(h+f/60) * deg-90*deg)); pen.lineTo(250 , 250 ); pen.lineWidth=4 pen.strokeStyle="#000"; pen.stroke(); } // 更新画布+执行时钟 setInterval(()=>{ canvas.width=canvas.width; sc() ked() mz() fz() sz() },1000) </script> </body> </html>
html画布时钟
最新推荐文章于 2024-08-25 09:57:22 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)