filltext()不显示的三大主因：未设font（须含字号和字体族）、fillstyle为透明色、y坐标按基线定位导致文字画出画布；中文乱码因字体未加载完成即绘制；性能卡顿多源于重复样式设置或滥用stroketext/shadowblur。
Canvas 画文字不是“写进去”就完事，而是得手动管好字体、颜色、位置、时机——漏一个环节，fillText() 就可能静默失败。
为什么 fillText() 调了却没显示？
最常见原因就三个：没设 font、没设 fillStyle、y 坐标理解错了基线位置。
-
font必须带字号和字体族，比如"16px Arial"；只写"Arial"或"16px"都无效 -
fillStyle默认是"#000000"，但若之前被设成"rgba(0,0,0,0)"或"none"，文字就完全透明 -
fillText("A", 10, 10)的 y=10 指的是文字**基线**所在纵坐标，不是顶部。小字号下可能整个字都画到画布上方去，肉眼看不见
怎么让文字对齐更可控？
靠 textBaseline 和 textAlign 配合，而不是硬调 y 值猜位置。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 想让 y 对齐文字顶部？设
ctx.textBaseline = "top"，此时y就是上边缘纵坐标 - 想水平居中？先
ctx.textAlign = "center"，再把 x 设为canvas.width / 2 - 避免混用
"alphabetic"（默认）和"middle"：前者受字体设计影响大，后者更稳定，但需注意它对齐的是整个字框中心，不是视觉中心
中文显示为方块或乱码怎么办？
本质是字体没加载完成就绘图，Canvas 不等、不提示、不重试，直接 fallback 到系统默认字体（常无中文支持）。
- 自定义 Web Font 必须监听
document.fonts.load()的 Promise，例如：await document.fonts.load("14px 'Noto Sans CJK SC'") - 别在
window.onload前执行绘制逻辑——此时字体资源大概率还没进缓存 - 开发时打开 DevTools → Network → 过滤
font，确认对应 .woff2 文件状态是 200 且已加载完毕 - 中文字体声明建议带引号和后备，如
"14px 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif"
频繁更新的文字（如 FPS 计数器）怎么避免卡顿？
性能瓶颈常不在绘制本身，而在重复设置样式或触发 CPU 光栅化。
- 每帧都调
save()/restore()是典型低效操作，直接复用已设好的font和fillStyle - 慎用
strokeText()和shadowBlur > 2：它们会让 Canvas 退出 GPU 加速路径，在低端设备上帧率骤降 - 如果只是标注用途，优先用 CSS 层叠在 Canvas 上方实现描边/阴影，保留 Canvas 纯色填充路径
- 需要精确测量宽高时，
measureText().actualBoundingBoxAscent很有用，但仅 Chrome 84+ / Firefox 91+ 支持，旧环境得靠经验预留上下边距
Canvas 文字最难的从来不是 API 怎么写，而是它彻底脱离浏览器渲染流——没有继承、没有重排、没有字体加载事件，所有时机、尺寸、fallback 行为都得你亲手兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
