HTML怎么做canvas时钟_HTML canvas时钟表盘绘制教程方法
作者：袖梨
2026-07-26
Canvas时钟核心是坐标系定位、角度计算和重绘优化；需DOM加载后获取ctx、平移原点至中心、配对文本对齐、按实际空间取半径、理解指针角度偏移原理、用requestAnimationFrame递归调用并save/restore状态。
Canvas 时钟的核心不是“怎么画圆”，而是“坐标系怎么摆、角度怎么算、重绘怎么不糊”——三者错一个，指针就飘、数字就歪、动画就卡。
canvas.getContext('2d') 必须在 DOM 加载后调用
常见错误是脚本放在 <head> 里直接执行，document.getElementById('clock') 返回 null，后续所有 ctx 调用都静默失败，控制台也不报错。
- 确保 JS 放在
</body>前，或用DOMContentLoaded包裹 - 检查
canvas元素是否真有id="clock"，大小是否设了（没设宽高时默认为 300×150，容易压扁） - 加一句
console.log(ctx)确认不是null，比猜强
表盘绘制前必须 translate 到中心，否则刻度全偏
Canvas 默认原点在左上角，不平移就硬算每个点的 centerX + cos(angle) * r，代码冗长且易错。用 ctx.translate(centerX, centerY) 后，所有坐标以 (0, 0) 为圆心，弧度计算直接对应旋转方向。
- 平移后，
ctx.arc(0, 0, radius, 0, Math.PI * 2)才真正画出正圆 - 数字标注时，
ctx.textAlign = 'center'和ctx.textBaseline = 'middle'必须配对，否则 12 点位置的 “12” 会贴着边缘 - 别忘了平移后，
radius要按实际可用空间取，推荐Math.min(canvas.width, canvas.height) / 2 * 0.9，留边防裁切
秒针/分针/时针的角度公式不能硬背，得理解偏移来源
秒针看似只和 seconds 有关，但起始方向朝上（12 点），所以要减 Math.PI / 2；时针不仅看小时，还要叠加分钟和秒带来的微小偏移，否则 1:59 时针还卡在 1，不指向 2。
立即学习“前端免费学习笔记（深入）”；
- 秒针弧度：
(seconds / 60) * Math.PI * 2 - Math.PI / 2 - 分针弧度：
((minutes + seconds / 60) / 60) * Math.PI * 2 - Math.PI / 2 - 时针弧度：
((hours % 12 + minutes / 60 + seconds / 3600) / 12) * Math.PI * 2 - Math.PI / 2 - 每次画指针前务必
ctx.save()，画完ctx.restore()，否则旋转状态会污染下一根指针
requestAnimationFrame 比 setInterval 更稳，但必须递归调用
用 setInterval(drawClock, 1000) 会导致秒针跳动、掉帧，尤其页面切到后台再切回时，时间差可能达数秒。而 requestAnimationFrame 与屏幕刷新率绑定，且自动节流。
- 写法必须是递归：
function drawClock() { /* 绘制逻辑 */ requestAnimationFrame(drawClock); } - 不要在
drawClock里重复调用drawClockFace()，表盘静态，只初始化一次即可 - 清除画布用
ctx.clearRect(0, 0, canvas.width, canvas.height)，别漏参数，否则清不干净，指针拖影
最难调的其实是高清屏（window.devicePixelRatio > 1）下的模糊问题——Canvas 像素没缩放，但 CSS 渲染放大了，结果表盘毛边。这需要单独处理 canvas 的 width/height 属性与样式尺寸的匹配，不在基础绘制逻辑里，但上线前大概率要补。
