canvas画文字仅靠filltext和stroketext，需显式设置font、fillstyle/strokestyle；y坐标对应基线而非顶部，垂直对齐靠textbaseline；描边填充需顺序调用且坐标一致；maxwidth仅缩放不换行，真实换行须measuretext手动分段。

Canvas 里画文字，靠的是 `fillText` 和 `strokeText` 这两个方法，没有别的选择。它们看着简单，但排版效果好不好，全看几个关键设置是否到位。

字体与颜色必须显式设定

这两个方法不会继承任何默认样式。调用前不设 ctx.font，文字就看不见——不是报错，是静默失败。

• font 写成 "16px" 或 "Microsoft YaHei" 单独出现，缺少完整 CSS 字体串（如 "bold 16px 'Microsoft YaHei', sans-serif"）
• fillStyle 或 strokeStyle 被设为 "transparent"、"rgba(0,0,0,0)" 或拼写错误的值
• 中文字体在非对应系统上失效（比如 "Songti SC" 在 Windows 上回退成无衬线体），上线前务必跨平台实测

y 坐标是基线，不是顶部

传入的 y 值对应文字基线位置，不是最上沿。默认字体下，文字实际会从 y − ascent 开始绘制，下降部（descender）则延伸到 y + descent。

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

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

下载

• 设 y = 20 却只看到文字下半截，很可能是因为字号大、基线偏高
• 垂直居中对齐需配合 ctx.textBaseline = "middle"，并把 y 设为容器中心纵坐标
• 顶部对齐用 "top"，底部对齐用 "bottom"，不同取值影响 y 的实际渲染位置

描边 + 填充组合要讲究顺序

想做出“白字黑边”这类效果，不能只靠一次调用。正确做法是：

• 先调用 strokeText()，设置 strokeStyle 和合适的 lineWidth（Retina 屏建议 ≥2）
• 再立刻调用 fillText()，使用 fillStyle 填满内部
• 两次的 x、y 必须完全一致，否则描边和填充会错位
• 如果只要空心字，跳过 fillText 即可；若只想要轮廓加轻微填充，可调低 fillStyle 透明度

maxWidth 不等于自动换行

这个参数常被误读。它不会让文字折行，而是强制将整段文本缩放到指定宽度内显示，可能造成字体变细、模糊，尤其在非整数缩放时：

• 中文等 CJK 字体在部分浏览器（如旧版 Safari）中可能直接忽略 maxWidth
• 真实换行需结合 measureText() 逐字/逐词测量宽度，手动切分字符串
• 每行 y 值需累加行高（如 y += lineHeight），lineHeight 通常取 fontSize × 1.2~1.4
• 避免依赖浏览器自动缩放，优先控制原始文本长度或预分段