master

分支 (1)

管理

管理

master

nice-page
/
Clock
/
canvas时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Clock</title>
    <style>
        /* 设置 canvas 元素为块级元素并居中，同时添加背景色和边框 */
        canvas {
            display: block;
            margin: 50px auto;
            background-color: #f4f4f4;
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <!-- 创建一个 600x600 像素的 canvas 元素，用于绘制时钟 -->
    <canvas id="clock" width="600" height="600"></canvas>

    <script>
        // 主函数：负责在 canvas 上绘制整个时钟
        function drawClock() {
            // 获取 canvas 元素及其 2D 绘图上下文
            const canvas = document.getElementById('clock');
            const ctx = canvas.getContext('2d');

            // 清除画布上的所有内容，为下一帧做准备
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 获取当前时间
            const now = new Date();
            const hours = now.getHours();      // 当前小时（0-23）
            const minutes = now.getMinutes();  // 当前分钟（0-59）
            const seconds = now.getSeconds();  // 当前秒（0-59）

            // 计算时针、分针、秒针的角度（以度为单位，-90 度用于将 0 度指向 12 点钟方向）
            const hourAngle = ((hours % 12) + minutes / 60) * (360 / 12) - 90;
            const minuteAngle = (minutes + seconds / 60) * (360 / 60) - 90;
            const secondAngle = (seconds) * (360 / 60) - 90;

            // 绘制时钟表盘（白色圆形）
            ctx.beginPath();
            ctx.arc(300, 300, 250, 0, Math.PI * 2); // 圆心(300,300)，半径 250
            ctx.fillStyle = '#ccc';
            ctx.fill();

            // 绘制时针（长度 100，线宽 20）
            drawHand(ctx, hourAngle, 100, 20);

            // 绘制分针（长度 150，线宽 20）
            drawHand(ctx, minuteAngle, 150, 20);

            // 绘制秒针（长度 180，线宽 20）
            drawHand(ctx, secondAngle, 180, 20);

            // 绘制中心固定圆点（半径 10）
            ctx.beginPath();
            ctx.arc(300, 300, 10, 0, Math.PI * 2);
            ctx.fillStyle = '#333';
            ctx.fill();

            // 请求浏览器在下一帧再次调用 drawClock，实现动画效果
            requestAnimationFrame(drawClock);
        }

        // 辅助函数：根据角度、长度和线宽绘制一条指针
        function drawHand(ctx, angle, length, width) {
            ctx.beginPath();
            ctx.moveTo(300, 300); // 起点：画布中心
            // 终点：根据角度和长度计算
            ctx.lineTo(
                300 + Math.cos(angle * (Math.PI / 180)) * length,
                300 + Math.sin(angle * (Math.PI / 180)) * length
            );
            ctx.lineWidth = width; // 设置线宽
            ctx.stroke();          // 描边绘制线条
        }

        // 首次调用 drawClock，启动时钟动画
        drawClock();
    </script>
</body>
</html>