Canvas时钟核心是坐标系定位、角度计算和重绘优化；需DOM加载后获取ctx、平移原点至中心、配对文本对齐、按实际空间取半径、理解指针角度偏移原理、用requestAnimationFrame递归调用并save/restore状态。
Canvas 时钟的核心不是“怎么画圆”，而是“坐标系怎么摆、角度怎么算、重绘怎么不糊”——三者错一个，指针就飘、数字就歪、动画就卡。
canvas.getContext('2d') 必须在 DOM 加载后调用
常见错误是脚本放在
里直接执行，
返回
，后续所有
调用都静默失败，控制台也不报错。
确保 JS 放在
前，或用
包裹
检查
元素是否真有
，大小是否设了（没设宽高时默认为 300×150，容易压扁）
加一句
确认不是
，比猜强
表盘绘制前必须 translate 到中心，否则刻度全偏
Canvas 默认原点在左上角，不平移就硬算每个点的
，代码冗长且易错。用
后，所有坐标以 (0, 0) 为圆心，弧度计算直接对应旋转方向。
平移后，
才真正画出正圆
数字标注时，
和
必须配对，否则 12 点位置的 “12” 会贴着边缘
别忘了平移后，
要按实际可用空间取，推荐
，留边防裁切
秒针/分针/时针的角度公式不能硬背，得理解偏移来源
秒针看似只和
有关，但起始方向朝上（12 点），所以要减
；时针不仅看小时，还要叠加分钟和秒带来的微小偏移，否则 1:59 时针还卡在 1，不指向 2。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
秒针弧度：
分针弧度：
时针弧度：
每次画指针前务必
，画完
，否则旋转状态会污染下一根指针
requestAnimationFrame 比 setInterval 更稳，但必须递归调用
用
会导致秒针跳动、掉帧，尤其页面切到后台再切回时，时间差可能达数秒。而
与屏幕刷新率绑定，且自动节流。
写法必须是递归：
不要在
里重复调用
，表盘静态，只初始化一次即可
清除画布用
，别漏参数，否则清不干净，指针拖影
最难调的其实是高清屏（
）下的模糊问题——Canvas 像素没缩放，但 CSS 渲染放大了，结果表盘毛边。这需要单独处理 canvas 的
/
属性与样式尺寸的匹配，不在基础绘制逻辑里，但上线前大概率要补。
document.getElementById('clock')nullctxDOMContentLoadedcanvasid="clock"console.log(ctx)nullcenterX + cos(angle) * rctx.translate(centerX, centerY)ctx.arc(0, 0, radius, 0, Math.PI * 2)ctx.textAlign = 'center'ctx.textBaseline = 'middle'radiusMath.min(canvas.width, canvas.height) / 2 * 0.9secondsMath.PI / 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 / 2ctx.save()ctx.restore()setInterval(drawClock, 1000)requestAnimationFramefunction drawClock() { /* 绘制逻辑 */ requestAnimationFrame(drawClock); }drawClockdrawClockFace()ctx.clearRect(0, 0, canvas.width, canvas.height)window.devicePixelRatio > 1widthheight