canvas 动态时钟通过时间转角度、rotate() 变换和 requestanimationframe 实现：刻度用 save/rotate/restore 绘制，指针按秒（6°/s）、分（0.1°/s）、时（0.5°/min）旋转，每帧清空重绘并优化抗锯齿与绘制顺序。
Canvas 绘制动态旋转的时钟，核心在于把时间转换为角度，并用 rotate() 或三角函数持续更新指针位置。刻度和指针不是静态图形，而是每帧根据当前时间重新计算绘制，关键在角度映射、坐标变换和动画循环控制。
刻度绘制：固定位置 + 角度偏移
12 个主刻度（小时）均匀分布在圆周上，每 30°（360° ÷ 12）一个；60 个小刻度（分钟）每 6°（360° ÷ 60）一个。不需要逐个计算坐标，用 save() → rotate() → 绘制短线 → restore() 更简洁：
- 先将画布原点移到表盘中心（
ctx.translate(cx, cy)） - 对每个刻度：保存状态 → 旋转对应角度 → 沿 x 轴正方向画一条短线（如
ctx.moveTo(90, 0); ctx.lineTo(100, 0)）→ 恢复状态 - 主刻度可加粗或延长，例如第 0、3、6、9、12 小时位置额外绘制数字或更长线段
指针旋转：时间 → 角度 → 变换
秒针每秒转 6°（360° ÷ 60），分针每分钟转 0.1°（360° ÷ 60 ÷ 60），时针每小时转 30°，每分钟再叠加 0.5°（30° ÷ 60）。直接用 rotate() 是最直观方式：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 以中心为原点，先
save() - 对秒针：计算
seconds * 6 * Math.PI / 180弧度，调用ctx.rotate(angle) - 然后从 (0, 0) 向 (0, -80) 绘制秒针（向上为负 y，符合 Canvas 默认坐标系）
- 同理处理分针、时针，注意它们的长度、粗细、起始偏移（如时针略短且带小偏移避免遮挡）
动态更新：requestAnimationFrame + 实时时间读取
不要依赖 setInterval，用 requestAnimationFrame 驱动平滑动画，并在每次帧中重新获取当前时间：
- 在动画函数内调用
new Date()获取毫秒级时间，避免累积误差 - 清空画布（
ctx.clearRect(0, 0, width, height)）再重绘全部元素 - 刻度只需绘制一次（可缓存为离屏 canvas），但指针必须每帧重绘——因为角度随毫秒变化
- 若追求更高精度，可基于时间戳计算理论角度，而非仅依赖系统时间间隔
视觉优化：抗锯齿与层次顺序
Canvas 默认开启抗锯齿，但细线指针易发虚。可通过以下方式提升清晰度：
- 使用整数坐标绘制（如
Math.round(x)），避免半像素渲染模糊 - 指针用
ctx.lineCap = 'round'让末端更圆润 - 绘制顺序：背景圆 → 刻度 → 时针 → 分针 → 秒针 → 中心圆点，确保层次正确
- 秒针建议用红色或高对比色，且不带阴影，突出其动态感
