HTML中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的渲染流。每一个像素的位置、每一种字体的加载时机、每一处基线的具体含义，都需要开发者亲手精确把控。稍一松懈，文字就可能消失、偏移，或者导致页面卡顿。