HTML canvas 文字绘制教程详解

本文深入解析HTML 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渲染流——每个像素都得你亲手算好位置、选对字体、等对时机。尤其做国际化项目时，中日韩字体加载时机和度量差异，比想象中更难预测。

本篇关于《HTML canvas 文字绘制教程详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！