怎么在HTML中通过canvas的fillText方法在画布上绘制文字

fillText()需同时设置font、fillStyle和textBaseline才能显示文字：font须含字号与字体族，fillStyle不可为透明或非法值，y坐标对应基线而非顶边，中文字体需声明后备，Web Font须等待加载完成。

fillText() 不是“加个标签就能出字”，它依赖三样东西：画布上下文、字体设置、填充样式。缺任何一项，文字就完全不显示——这是最常卡住人的地方。

fillText() 必须配合 font 和 fillStyle 才能生效

Canvas 不继承 CSS 字体或颜色，所有渲染参数必须手动指定。常见错误是只写 ctx.fillText("hello", 10, 50) 却没设 font 或 fillStyle：

• font 必须包含字号和字体族，例如 "16px Arial" 或 "bold 14px 'Microsoft YaHei'"；只写 "Arial" 会失效
• fillStyle 默认是 "#000000"，但若之前被设成透明色（如 "rgba(0,0,0,0)"）或非法值（如 "none"），文字照样不可见
• 中文字体建议显式声明后备，比如 "14px 'PingFang SC', 'Microsoft YaHei', sans-serif"，避免系统无对应字体时渲染成方块

y 坐标对应的是基线（baseline），不是文字顶部

fillText("A", x, y) 的 y 指的是文字**基线**所在位置，不是顶边也不是中心。这意味着：

• 同一 y 值下，“A” 和 “g” 的实际视觉顶部/底部位置不同
• 想让文字顶部对齐画布某处？设 ctx.textBaseline = "top"
• 想水平居中？配合 ctx.textAlign = "center"，再把 x 设为 canvas.width / 2
• 需要精确测量？用 ctx.measureText(text).actualBoundingBoxAscent（Chrome 84+ / Firefox 91+ 支持）

maxWidth 参数在 Safari 中无效，且压缩行为不可控

fillText(text, x, y, maxWidth) 的 maxWidth 是可选参数，但：

立即学习“前端免费学习笔记（深入）”；

• Safari 完全忽略它，文字不会自动缩放或换行
• 其他浏览器虽支持，但压缩逻辑是按比例缩小整个文本块，不是字体大小自适应，效果生硬
• 真正要做宽度限制，得自己用 ctx.measureText() 测量、截断、分段绘制，或改用 CSS + DOM 覆盖方案

中文或自定义字体要等加载完成再绘制

Web Font 是异步加载的。如果在 @font-face 字体还没就绪时就调 fillText()，Canvas 会降级使用后备字体，结果就是乱码或方块：

• 不要依赖 window.onload，它不保证字体已就绪；应监听 document.fonts.load() 的 Promise
• 测试时可在 DevTools Network 面板过滤 font 类型，确认字体文件状态为 200
• 临时调试可用 setTimeout 延迟绘制，但上线必须用字体加载检测

最容易被忽略的其实是时机问题：字体没加载完、font 写错格式、y 当成顶边来用——这三类问题占了文字不显示案例的八成以上。别急着查文档，先盯住这三点检查一遍。