【html】canvas实现一个时钟

【html】canvas实现一个时钟 - 实践

2025-10-15 18:39 tlnshuju 阅读(0) 评论(0) 收藏举报

前言

“一行代码能做什么？”——有人用一行代码写出圣诞树，有人用一行代码写出 3D 隧道。
今天我想带你回到最原始的画布：HTML5 Canvas。
我们只用 一个 <canvas> 标签 + 一份被注释到“膨胀”的源码，做一只实时跳动的机械时钟。
读完你不仅能照抄代码，还能彻底搞懂：

为什么 requestAnimationFrame 比 setInterval 更适合动画
三角函数在前端到底怎么用
如何把“时间”映射成“角度”再映射成“坐标”

在线预览

把下面 60 行“真身”粘进任意 .html 文件，双击即可运行：
（我已经把注释写成了“伪 600 行”——每行都带中文讲解，复制即食）

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>Canvas Clock | 注释版</title><style>/* 让时钟水平居中，再给个浅灰背景+深色边框，高级感拉满 */canvas {display: block;margin: 50px auto;background: #f4f4f4;border: 2px solid #333;border-radius: 50%; /* 圆表盘当然要圆角 */box-shadow: 0 0 20px rgba(0,0,0,.15);}</style></head><body><!-- 600×600 像素的画布，id 叫“clock”，后面 JS 就靠它画画 --><canvas id="clock" width="600" height="600"></canvas><script>/* 主绘制函数：每帧擦掉旧画面 -> 重新画新画面，形成动画 */function drawClock() {const canvas = document.getElementById('clock');const ctx    = canvas.getContext('2d');      // 拿到 2D 画笔const cx = 300, cy = 300, r = 250;           // 圆心(cx,cy) 半径 r/* 1. 清屏：把上一帧的画面整个擦掉，避免拖影 */ctx.clearRect(0, 0, 600, 600);/* 2. 表盘：一个灰色大圆 */ctx.beginPath();ctx.arc(cx, cy, r, 0, Math.PI * 2);ctx.fillStyle = '#ccc';ctx.fill();/* 3. 拿到当前时分秒 */const now = new Date();const h = now.getHours();const m = now.getMinutes();const s = now.getSeconds();/* 4. 角度换算：把“时间”转成“顺时针角度”，再减去 90° 让 0° 指向 12 点 */const hAngle = ((h % 12) + m / 60) * 30  - 90;  // 每小时 30°const mAngle = (m + s / 60)        * 6   - 90;  // 每分钟 6°const sAngle = s                   * 6   - 90;  // 每秒 6°/* 5. 画三根指针：颜色、长度、线宽各不相同，秒针用骚红色 */drawHand(ctx, hAngle, 100, 12, '#333');         // 时针drawHand(ctx, mAngle, 150, 8,  '#555');         // 分针drawHand(ctx, sAngle, 180, 3,  '#e74c3c');      // 秒针/* 6. 中心小圆点：盖住三根指针的尾巴，显得更像实物 */ctx.beginPath();ctx.arc(cx, cy, 10, 0, Math.PI * 2);ctx.fillStyle = '#333';ctx.fill();/* 7. 请求下一帧：浏览器会在下一次重绘前再调 drawClock()，形成无限循环 */requestAnimationFrame(drawClock);}/* 工具函数：画一根指针angle：旋转角度（度）  length：长度   width：线宽   color：颜色 */function drawHand(ctx, angle, length, width, color) {const rad = (angle * Math.PI) / 180;   // 角度转弧度const x = 300 + Math.cos(rad) * length;const y = 300 + Math.sin(rad) * length;ctx.beginPath();ctx.moveTo(300, 300);ctx.lineTo(x, y);ctx.lineWidth = width;ctx.strokeStyle = color;ctx.lineCap = 'round';   // 圆角线帽，更柔和ctx.stroke();}/* 启动！第一次手动调用，后面就靠 requestAnimationFrame 自动循环 */drawClock();</script></body></html>

关键知识点拆解

步骤	前端技巧	一句话记忆
清屏	`ctx.clearRect`	动画第一定律：先擦后画
角度	`-90°` 修正	数学 0° 指向 3 点，时钟 0° 指向 12 点
弧度	`Math.PI / 180`	角度给人类看，弧度给三角函数看
指针终点	`cos` 管 x，`sin` 管 y	高中三角函数终于还给了体育老师
动画节流	`requestAnimationFrame`	浏览器帮你匹配屏幕刷新率，60 fps 不丢帧