HTML中canvas如何绘制文字
来源：互联网 2026-04-30 11:40:18Canvas文字不显示主因是fillStyle或font未设置；fillText和strokeText需手动配齐样式，y为基线位置，textBaseline默认alphabetic易致裁剪，中文字体须显式声明，Web Font需等待加载完成。 在Canvas里折腾文字，结果屏幕上啥也没显示？别急着怀
Canvas文字不显示主因是fillStyle或font未设置；fillText和strokeText需手动配齐样式，y为基线位置，textBaseline默认alphabetic易致裁剪，中文字体须显式声明，Web Font需等待加载完成。
在Canvas里折腾文字，结果屏幕上啥也没显示？别急着怀疑人生，八成是fillStyle或font属性漏设了——这两个必须同时到位，缺一不可。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
fillText() 和 strokeText() 怎么用才不出错
Canvas里能画文字的API就这两个，但它们可不会自动继承任何样式。每次调用前，都得手动把参数配齐：
fillText(text, x, y)用来填充实心字，它的颜色依赖fillStyle；而strokeText(text, x, y)只描边，颜色由strokeStyle决定。- 参数里的
y，指的是文字的基线位置，可不是文字顶部。如果你设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，等这个Promise resolve了，再执行绘图操作。 - 尽量避免在
window.onload事件触发前绘制文字——那时候字体文件很可能还没加载进缓存。 - 调试时，可以打开开发者工具的Network面板，过滤
font类型，确认字体资源的加载状态是200（成功）且已完成。 - 临时调试的话，可以先用系统级的中文字体，比如
“14px 'PingFang SC', 'Hiragino Sans GB'”，这比依赖自定义Web Font要稳定得多。
性能差、卡顿？小心 strokeText() 和 shadowBlur
追求视觉效果的同时，也得留意性能开销。某些效果会让Canvas强制走CPU光栅化路径，在低端设备上，或者用requestAnimationFrame高频重绘时，帧率可能会骤降：
strokeText()的开销比fillText()要高不少，如果只是纯标注场景，优先考虑用后者配合CSS边框层叠来实现。- 当
shadowBlur的值大于2之后，性能衰减会非常明显。如果必须添加阴影，建议把值控制在1或2。 - 对于那些需要频繁更新的文字（比如FPS计数器），别在每一帧都调用
sa ve()和restore()，尽量复用已经设置好的font和fillStyle属性。
说到底，Canvas文字绘制的难点从来不在语法本身，而在于它完全脱离了CSS的渲染流。每一个像素的位置、每一种字体的加载时机、每一处基线的具体含义，都需要开发者亲手精确把控。稍一松懈，文字就可能消失、偏移，或者导致页面卡顿。
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
