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 当成顶边来用——这三类问题占了文字不显示案例的八成以上。别急着查文档，先盯住这三点检查一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
