div+js 和 canvas 绘制时钟

最新推荐文章于 2024-07-05 14:51:32 发布

kowalsik

最新推荐文章于 2024-07-05 14:51:32 发布

阅读量68

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/kklkjfdiiu/article/details/129860236

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <style>
       .clock {
       width: 200px;
       height: 200px;
       border-radius: 50%;
       border: 5px solid #333;
       position: relative;
       }

       .hour-hand,
       .minute-hand,
       .second-hand {
       background-color: #333;
       position: absolute;
       top: calc(50% - 2.5px);
       left: 50%;
       transform-origin: center bottom;
       }

       .hour-hand {
       height: 50px;
       width: 8px;
       margin-left: -4px;
       transform:rotate(var(--rotation));
       transform-origin:top;
       }

       .minute-hand {
       height: 75px;
       width: 6px;
       margin-left: -3px;
       transform:rotate(var(--rotation));
       transform-origin:top;
       }

       .second-hand {
       height: 90px;
       width: 2px;
       margin-left: -1px;
       transform:rotate(var(--rotation));
       transform-origin:top;
       }

       .center {
       height: 15px;
       width: 15px;
       border-radius: 50%;
       background-color: #333;
       position: absolute;
       top: calc(50% - 7.5px);
       left: calc(50% - 7.5px);
       }
   </style>
   <body>
       <div class="clock">
       <div class="hour-hand"></div>
       <div class="minute-hand"></div>
       <div class="second-hand"></div>
       <div class="center"></div>
       </div>
       <canvas id="clock" width="200" height="200"></canvas>
   </body>
   <script>
       function setClock() {
       const date = new Date();

       const secondsRatio = date.getSeconds() / 60;
       const minutesRatio = (secondsRatio + date.getMinutes()) / 60;
       const hoursRatio = (minutesRatio + date.getHours()) / 12;

       const hourHand = document.querySelector(".hour-hand");
       const minuteHand = document.querySelector(".minute-hand");
       const secondHand = document.querySelector(".second-hand");
           console.log(secondsRatio)
       setRotation(hourHand, hoursRatio);
       setRotation(minuteHand, minutesRatio);
       setRotation(secondHand, secondsRatio);
       }

       function setRotation(element, rotationRatio) {
       element.style.setProperty("--rotation", rotationRatio * 360+180+'deg');
       }

       setInterval(setClock, 1000);
       var canvas = document.getElementById('clock');
       var ctx = canvas.getContext('2d');
       var radius = canvas.width / 2;
       function drawClock() {
           ctx.clearRect(0, 0, canvas.width, canvas.height);
       // 绘制时钟边框
       ctx.beginPath();

       ctx.arc(radius, radius, radius - 10, 0, 2 * Math.PI);
       ctx.lineWidth = 2;
       ctx.strokeStyle = '#000';
       ctx.stroke();
       ctx.closePath();

       // 绘制小时数字
       ctx.font = '24px Arial';
       ctx.textAlign = 'center';
       ctx.textBaseline = 'middle';
       for (var i = 1; i <= 12; i++) {
       var angle = i * Math.PI / 6;
       ctx.fillText(i.toString(), radius + (radius - 30) * Math.sin(angle),
       radius - (radius - 30) * Math.cos(angle));
       }

       // 绘制时针
       var now = new Date();
       var hour = now.getHours();
       var minute = now.getMinutes();
       var second = now.getSeconds();
       hour = hour % 12; // 转换为 12 小时制
       var hourAngle = (hour * 60 + minute) * Math.PI / 360;
       ctx.beginPath();
       ctx.moveTo(radius, radius);
       ctx.lineWidth = 8;
       ctx.lineCap = 'round';
       ctx.lineTo(radius + (radius - 80) * Math.sin(hourAngle),
       radius - (radius - 80) * Math.cos(hourAngle));
       ctx.strokeStyle = '#000';
       ctx.stroke();
       ctx.closePath();

       // 绘制分针
       var minuteAngle = minute * Math.PI / 30;
       ctx.beginPath();
       ctx.moveTo(radius, radius);
       ctx.lineWidth = 5;
       ctx.lineCap = 'round';
       ctx.lineTo(radius + (radius - 50) * Math.sin(minuteAngle),
       radius - (radius - 50) * Math.cos(minuteAngle));
       ctx.strokeStyle = '#000';
       ctx.stroke();
       ctx.closePath();

       // 绘制秒针
       var secondAngle = second * Math.PI / 30;
       ctx.beginPath();
       ctx.moveTo(radius, radius);
       ctx.lineWidth = 2;
       ctx.lineCap = 'round';
       ctx.lineTo(radius + (radius - 30) * Math.sin(secondAngle),
       radius - (radius - 30) * Math.cos(secondAngle));
       ctx.strokeStyle = '#000';
       ctx.stroke();
       ctx.closePath();

       // 绘制中心点
       ctx.beginPath();
       ctx.arc(radius, radius, 5, 0, 2 * Math.PI);
       ctx.fillStyle = '#000';
       ctx.fill();

       ctx.closePath();
       }

       // 每秒钟更新时钟
       setInterval(drawClock, 1000);
   </script>
</html>