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的渲染流。每一个像素的位置、每一种字体的加载时机、每一处基线的具体含义，都需要开发者亲手精确把控。稍一松懈，文字就可能消失、偏移，或者导致页面卡顿。
相关攻略
Canvas文字不显示主因是fillStyle或font未设置；fillText和strokeText需手动配齐样式，y为基线位置，textBaseline默认alphabetic易致裁剪，中文字体须显式声明，Web Font需等待加载完成。 在Canvas里折腾文字，结果屏幕上啥也没显示？别急着怀
modulepreload：专为ES模块设计的预加载机制 先明确一个核心概念：modulepreload 是专门服务于 ES 模块的预加载机制。它的工作模式是“只下载，不执行”，并且需要你提供模块的绝对路径。关键点在于，它的 href 必须与后续 script 标签的 src 完全一致，跨域时务必加
HTML怎么解决字体不可见FOIT_HTML FOIT字体不可见解决方法【手册】 先明确一个关键点：FOIT（Flash of Invisible Text）并非字体加载卡住了，而是浏览器的一种“主动选择”——它宁可让文字暂时消失，也绝不先用系统字体凑合显示。 理解了这一点，解决方案的思路就清晰了。
title属性是HTML全局属性，仅提供浏览器原生工具提示，不生成DOM节点、不可样式化、无障碍支持弱，仅适用于非关键的兜底辅助文本。 title属性只触发浏览器原生提示，不是真正的UI组件 先明确一点：title 属性是 HTML 的全局属性，几乎所有元素都能用。但它的本质，是给浏览器提供一段纯文
用 Intersection Observer 实现无限滚动的核心是观察占位元素是否进入视口，而非监听 window onscroll；需设 rootMargin 提前触发、每次加载后重新 observe、校验响应结构、防重复请求与 XSS、降级处理兼容性问题。 用 Intersection Obs
热门专题
热门推荐
Origin Code发布VORTEX系列专用分体式水冷冷头模块 2026年4月7日，知名内存模组品牌Origin Code正式发布了专为VORTEX系列内存打造的分体式水冷冷头模块，官方售价为899元。这款产品的推出，为追求极致散热性能、低温和系统视觉一体化的高端DIY玩家及超频爱好者，提供了一个
荣耀WIN游戏本定档4月23日：性能释放突破250瓦，电竞体验全面升级 2026年4月7日，荣耀正式揭晓了全新WIN游戏本的发布日期：4月23日。这款备受瞩目的产品其实早已不是秘密，早在去年12月，荣耀PC产品负责人就已经在公开渠道透露了新品的进展，并确认了一个关键身份——它将成为《三角洲行动》职业
内存供应趋紧，苹果部分Mac交付周期显著延长 进入2026年第二季度，全球半导体产能的重新分配仍在持续。一个不容忽视的趋势是，人工智能应用的爆发式增长，正持续推高对高性能内存芯片的需求，导致DRAM市场供应整体趋紧。自去年下半年开始的这轮价格上涨，让终端设备制造商普遍感受到了成本压力，即便是供应链管
荣威全新i6上市：7 49万起售，搭载8155芯片与国潮 2026年4月30日，荣威品牌旗下的全新一代紧凑型轿车i6正式推向市场。新车一口气带来了三款配置，分别命名为长久版、豪久版与臻久版，官方给出的指导价区间定在7 49万元到8 49万元。不过，眼下正值上市初期，官方还推出了限时抢订政策，实际支付
暗黑破坏神4：憎恨之王上线后，术士职业迅速跻身当前版本最具统治力的职业行列 其核心能力涵盖恶魔召唤、地狱火攻击与神秘印记体系，其中一种以“召唤即献祭”为运转逻辑的召唤流派正展现出显著优势。 这次资料片带来的技能系统重构，可以说是一次彻底的革新：所有被动技能被移除，每个主动技能都扩展成了拥有多节点分支