示意图如下：
<!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" /> <title> 网页时钟 </title> </head> <body> <h2> Web时钟 </h2> <canvas id = "hello" width = "400" height = "400" style = "border:1px solid black"> </canvas> <script languagetype = "text/javascript"> var myCavas = document.getElementById('hello'); var c = myCavas.getContext('2d'); function clock() { c.clearRect(0, 0, 400, 400); //获取当前时间 var data = new Date(); //获取秒 var sec = data.getSeconds(); //获取分钟 var min = data.getMinutes(); //获取小时 var hour = data.getHours(); c.save(); c.translate(200, 200); c.rotate(-Math.PI/2); //分针刻度线 for (var i = 0; i < 60; i++) { //画60个刻度线 c.beginPath(); c.strokeStyle = "yellowgreen"; c.lineWidth = 5; c.moveTo(117, 0); c.lineTo(120, 0); c.stroke(); //每6deg画一个分钟刻度线 c.rotate(Math.PI/30); c.closePath(); } //时钟刻度线 for (var i = 0; i < 12; i++) { //画60个刻度线 c.beginPath(); c.strokeStyle = "green"; c.lineWidth = 8; c.moveTo(100, 0); c.lineTo(120, 0); c.stroke(); //每6deg画一个分钟刻度线 c.rotate(Math.PI/6); c.closePath(); } //外表盘 c.beginPath(); c.strokeStyle = "pink"; c.arc(0, 0, 145, 0, Math.PI*2); c.lineWidth = 12; c.stroke(); c.closePath(); //画时针 hour = hour > 12 ? hour-12 : hour; //console.log(hour); c.beginPath(); c.save(); //设置旋转角度，参数是弧度，角度0-360 弧度角度*Math.PI/180 c.rotate(Math.PI/6*hour + Math.PI/6*min/60 + Math.PI/6*sec/3600); c.strokeStyle = "yellowgreen"; c.lineWidth = 4; c.moveTo(-20, 0); c.lineTo(50, 0); c.stroke(); c.restore(); c.closePath(); //画分针 //console.log(min); c.beginPath(); c.save(); c.rotate(Math.PI/30*min + Math.PI/30*sec/60); c.strokeStyle = "springgreen"; c.lineWidth = 3; c.moveTo(-30, 0); c.lineTo(70, 0); c.stroke(); c.restore(); c.closePath(); //画秒针 c.beginPath(); c.save(); c.rotate(Math.PI/30*sec); c.strokeStyle = "red"; c.lineWidth = 2; c.moveTo(-40, 0); c.lineTo(120, 0); c.stroke(); c.restore(); c.closePath(); c.restore(); } clock(); setInterval(clock, 1000); </script> </body> </html>
发表评论 取消回复