HTML canvas 绘制文字方法详解

Canvas文字绘制看似简单，实则暗藏诸多易被忽视的坑：从fillStyle与font必须同时设置、y坐标代表基线而非顶部，到textBaseline默认值导致的错位、中文字体需显式声明、Web Font异步加载引发的方块问题，再到strokeText和阴影带来的性能骤降——每一个细节都要求开发者精准把控。掌握这些底层逻辑，才能让Canvas文字稳定、准确、高效地呈现，真正摆脱“文字不显示”“位置奇怪”“中文字变方块”的反复调试困境。

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 渲染流——每个像素的位置、每种字体的加载时机、每处基线的含义，都得你亲手掐准。稍一松懈，文字就消失、偏移或卡顿。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~