Canvas绘制动态齿轮的核心是精准路径计算与多齿轮联动映射：齿形由内外圆及斜边构成闭合路径，需统一极坐标转换；中心距、相位错开半齿距、惰轮反向旋转确保真实啮合；推荐用ctx.save/translate/rotate实现高效动态旋转。
Canvas 绘制动态旋转的齿轮，核心不在“画齿”，而在“让齿动得准”——关键在于路径计算要匹配物理啮合逻辑，位置映射要支撑多齿轮联动。静态齿形可复用，但一动起来，角度偏移、中心距误差、相位同步稍有偏差，齿轮就会“打滑”或卡顿。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
齿形路径计算：从几何单元到循环生成
齿轮齿槽不是任意曲线，而是由内圆、外圆和两个对称斜边构成的封闭路径。一个齿对应一个最小几何单元（如 D₁ABCD），其顶点坐标依赖于三个参数：内圆半径 r₁、外圆半径 r₂、单齿占圆心角 w₀。 计算时需注意： - 所有坐标必须基于极坐标转直角坐标的统一公式：x = cx + r × cos(θ)，y = cy + r × sin(θ) - A、B 点需沿 AB 中垂线方向偏移距离 d，偏移量由齿厚决定，不能简单用像素硬编码 - C、D 在外圆上，角度分别为 w₀ 和 2w₀，而非等分角度，否则齿距不均 - 整个齿形路径应闭合（moveTo → lineTo ×4 → closePath），避免描边断裂
多齿轮位置映射：中心距与啮合相位校准
两个齿轮要真实啮合，不能只靠 rotate() 转动，必须满足：节圆相切 + 啮合角互补 + 角速度反比于齿数。 这意味着： - 两齿轮中心距离 = r₁₁ + r₁₂（各自节圆半径之和），需提前算好并固定 canvas 坐标 - 小齿轮每转一圈，大齿轮转过的角度 = (小齿轮齿数 / 大齿轮齿数) × 360°，用弧度参与计算更稳妥 - 初始相位要错开半个齿距（即 w₀/2），否则首齿会“撞齿”；可用 Math.PI / n（n 为齿数）作初始偏移 - 若含三齿轮联动，中间齿轮起惰轮作用，其旋转方向与两侧相反，角度增量需加负号
动态旋转实现：坐标系变换优于手动重算
直接修改每个齿顶点坐标来实现旋转，性能差且易出错。推荐用 Canvas 2D 上下文变换链： - 对每个齿轮单独调用 ctx.save() - 用 ctx.translate(cx, cy) 把原点移到齿轮中心 - 用 ctx.rotate(currentAngle) 施加当前旋转量（单位：弧度） - 绘制原始未旋转的齿形路径（即按 0° 状态定义的 path） - 调用 ctx.restore() 恢复坐标系，不影响其他元素 这样既保持齿形定义简洁，又天然支持缩放、平移等复合变换，动画帧间只需更新 currentAngle 变量
性能与视觉优化要点
高频重绘下，以下细节影响流畅度和真实感： - 使用 requestAnimationFrame 替代 setInterval，避免掉帧和时间漂移 - 齿形路径在初始化时缓存为 Path2D 对象，避免每帧重复解析字符串路径 - 开启硬件加速：canvas.style.transform = 'translateZ(0)'（尤其在复杂背景中） - 线条末端用 ctx.lineCap = 'round'，消除齿尖锯齿感；适当加大 ctx.lineWidth 增强机械质感 - 若需阴影或高光，应在 restore 后统一绘制，避免在变换坐标系内叠加造成偏移错乱
