canvas文字不显示主因是fillstyle或font未设置；filltext和stroketext需手动配齐样式，y为基线位置，textbaseline默认alphabetic易致裁剪，中文字体须显式声明，web font需等待加载完成。
Canvas里文字不显示，八成是fillStyle或font漏设了——这两个必须同时存在，缺一不可。
fillText() 和 strokeText() 怎么用才不出错
这两个是唯二能画文字的 API，但它们不自动继承任何样式，每次调用前都得手动配齐参数：
-
fillText(text, x, y)填充实心字，依赖fillStyle；strokeText(text, x, y)只描边，依赖strokeStyle -
y指的是基线（baseline）位置，不是文字顶部。比如y = 20时，16px 字体的大部分内容其实在画布上方被裁掉 - 可选参数
maxWidth会强制压缩文字宽度，但不会换行，只缩放字形，慎用 - 中文必须显式声明中文字体，例如
ctx.font = "16px 'Microsoft YaHei', sans-serif"；只写"16px sans-serif"在 macOS 或 Linux 上大概率出方块
为什么文字总在奇怪位置？textBaseline 和 textAlign 很关键
默认 textBaseline = "alphabetic"，这是历史遗留行为，和视觉直觉不一致。想让 y 对齐文字顶部，就得改：
-
ctx.textBaseline = "top"：此时y就是文字最顶那条线的位置 -
ctx.textBaseline = "middle"+ctx.textAlign = "center"：配合x = canvas.width / 2才能真正居中 - 别信
measureText().width能直接拿来算垂直位置——它不提供高度信息；actualBoundingBoxAscent要 Chrome 84+ / Firefox 91+ 才支持
中文显示异常、字体加载失败怎么办
Web Font 是异步加载的，Canvas 不会等它。你在 @font-face 声明后立刻 fillText()，大概率渲染成后备字体或方块：
- 用
document.fonts.load("16px 'Noto Sans CJK SC'")返回 Promise，等 resolve 再绘图 - 避免在
window.onload前执行文字绘制——此时字体文件很可能还没进缓存 - DevTools Network 面板过滤
font类型，确认字体状态是 200 且已加载完成 - 临时调试可先用系统级中文字体如
"14px 'PingFang SC', 'Hiragino Sans GB'"，比自定义 Web Font 更稳
性能差、卡顿？小心 strokeText() 和 shadowBlur
这些效果会让 Canvas 强制走 CPU 光栅化路径，尤其在低端设备或 requestAnimationFrame 高频重绘时帧率骤降：
-
strokeText()比fillText()开销高不少，纯标注场景优先用后者 + 边框 CSS 层叠实现 -
shadowBlur > 2后性能衰减明显，必须加阴影时控制在shadowBlur = 1或2 - 频繁更新的文字（如 FPS 计数器），别每帧都调
save()/restore()，复用已设好的font和fillStyle
最麻烦的从来不是语法，而是 Canvas 文字完全脱离 CSS 渲染流——每个像素的位置、每种字体的加载时机、每处基线的含义，都得你亲手掐准。稍一松懈，文字就消失、偏移或卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
