Canvas文字不显示需检查fillStyle和font是否已设置，二者缺一不可；y坐标对应基线而非顶边；中文需显式声明字体并等待Web Font加载完成；慎用strokeText和大阴影以防性能下降。
Canvas文字不显示？先检查fillStyle和font是否已设
Canvas不会自动继承CSS样式，所有文字渲染参数都得手动指定。常见现象是调了fillText()却啥也没画出来——八成是漏设fillStyle（默认为"#000000"但可能被覆盖）或font（默认是"10px sans-serif"，太小或字体名无效时会降级失败）。
-
font必须包含字号和字体族，比如"16px Arial"或"bold 14px 'Helvetica Neue'"；只写"Arial"无效 -
fillStyle设成透明色（如"rgba(0,0,0,0)"）或非法值（如"none"）也会导致文字不可见 - 中文字体建议显式声明，避免系统无对应字体时回退成方块，例如
"14px 'Microsoft YaHei', sans-serif"
fillText()坐标是基线位置，不是左上角
Canvas里fillText(text, x, y)的y参数指文字**基线（baseline）** 的垂直位置，不是顶边也不是中心点。这意味着同一y值下，不同字体、字号的文字实际显示高度差异很大，容易误判排版。
- 用
context.textBaseline = "top"可让y对齐文字顶部，更符合直觉 - 用
context.textAlign = "center"配合x能实现水平居中，但注意它影响的是整个文本块的锚点，不是单个字符 - 想精确控制上下位置，可结合
context.measureText(text).actualBoundingBoxAscent获取真实上升高度（需Chrome 84+ / Firefox 91+）
中文乱码或方块？确认字体加载完成再绘制
网页字体（尤其是自定义Web Font）是异步加载的。如果在@font-face还没就绪时就调fillText()，Canvas会用后备字体渲染，结果就是方块或默认英文字体。
- 监听
document.fonts.load("16px 'YourFontName'")的Promise，等解析完成再绘图 - 避免在
window.onload前执行文字绘制——此时字体很可能未就绪 - 测试时可在DevTools的Network面板过滤
font类型，确认字体文件已加载且状态为200
性能敏感场景慎用strokeText()或阴影
strokeText()、shadowColor、shadowBlur这些效果会让Canvas放弃GPU加速路径，强制走CPU光栅化，在低端设备或高频重绘时帧率明显下降。
立即学习“前端免费学习笔记（深入）”；
- 纯文字标注优先用
fillText()，描边效果尽量用CSS层叠在Canvas上方实现 - 阴影半径超过
4后性能衰减加剧，若必须用，把shadowBlur控制在2以内 - 频繁更新的文字（如FPS计数器），避免每帧都调
save()/restore()，直接复用已设好的fillStyle和font
Canvas文字最麻烦的不是语法，而是它完全脱离CSS渲染流——每个像素都得你亲手算好位置、选对字体、等对时机。尤其做国际化项目时，中日韩字体加载时机和度量差异，比想象中更难预测。
