Canvas绘制环形文字的关键是计算字符坐标并旋转对齐圆周切线：先定圆心与半径，再按等分角度算各字符位置，用translate+rotate+center/middle对齐绘制，辅以字体自适应与细节优化。

Canvas 绘制环形文字，本质是把每个字符按圆周等分后，分别放到对应位置并旋转对齐切线方向。关键不在“画圆”，而在“算点+转字+居中”。

确定圆心与半径

先设定环形文字所在的圆：圆心一般取画布中心（如 ctx.translate(width/2, height/2)），半径决定文字离中心远近。半径太小易重叠，太大则文字稀疏；建议从 150–250px 起调，配合字体大小动态调整。

计算每个字符的角度与坐标

假设文本为 "Hello"（5 个字符），完整圆周 360°，则每字符占角度：angleStep = 2 * Math.PI / text.length。第 i 个字符的弧度为：angle = i * angleStep - Math.PI / 2（减 π/2 是为了让首字符起始于顶部，可按需偏移）。

其在圆上的坐标为：

• x = radius × cos(angle)
• y = radius × sin(angle)

注意：Canvas 的 y 轴向下为正，sin 值为正时 y 向下，因此顶部起始需用 -Math.PI/2 或手动翻转 y 符号来校正视觉方向。

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

逐字符旋转并居中绘制

直接在 (x, y) 处 fillText 会导致文字沿径向排列（像辐条），而非贴合圆周。正确做法是：让每个字符绕自身中心旋转，使其基线与圆周相切。

步骤如下：

• 用 ctx.save() 保存当前状态
• 用 ctx.translate(x, y) 将坐标系原点移到该字符位置
• 用 ctx.rotate(angle + Math.PI/2) 旋转（+π/2 是让文字朝向圆周切线方向）
• 用 ctx.textAlign = 'center' 和 ctx.textBaseline = 'middle' 实现字符中心对齐
• 以 ctx.fillText(char, 0, 0) 在原点绘制
• 用 ctx.restore() 恢复状态，避免影响后续字符

处理字体与间距细节

字号过大或字符过多时，容易发生重叠。可做以下优化：

• 根据半径和字符数自动缩放字体：fontSize = Math.min(24, radius * 0.25 / text.length)
• 对空格、标点等非可视字符跳过绘制，或统一替换为窄字符
• 若需内环+外环双层文字，分别用不同半径和旋转偏移（如外环 +5°，内环 −3°）增强层次感
• 避免使用太粗的字体或描边过重，否则边缘模糊影响辨识度

不复杂但容易忽略。