filltext() 和 stroketext() 是 canvas 中唯一直接绘制文字的方法，必须显式设置 font 属性（如 "bold 24px 'pingfang sc'"），且需在调用前执行；textbaseline 默认为 alphabetic，中文推荐设为 'middle' 并配合 textalign='center' 实现居中；描边与填充需分步执行并确保颜色对比及 linewidth=2、linejoin='round'；使用 web 字体时须 await document.fonts.load() 避免渲染异常。
fillText() 和 strokeText() 是唯一能直接在 <canvas></canvas> 里画文字的两个方法，但光调用它们不设置 font 属性，文字会用浏览器默认字体（通常是 10px sans-serif），几乎不可读。
必须先设 font，再调用绘制方法
Canvas 不像 DOM 文本那样继承 CSS 样式。font 属性必须显式设置，且必须在 fillText() 或 strokeText() 之前执行，否则无效。
-
font值格式严格类 CSS：例如"bold 24px 'PingFang SC', 'Microsoft YaHei', sans-serif" - 中文字体名含空格必须加单引号或双引号，否则 Chrome/Safari 会忽略整段声明
- 字号单位必须带
px（em、rem不生效） - 如果指定的字体系统不存在，浏览器按顺序回退到下一个，最终 fallback 到
sans-serif
textBaseline 决定 y 坐标到底对齐哪条线
Canvas 的 y 坐标不是文字顶部或底部，而是「基线」（baseline）位置。默认是 alphabetic，即英文字母 x 的下沿——这会导致中文看起来偏高、被截断。
- 中文标题常用
ctx.textBaseline = 'middle'，配合ctx.textAlign = 'center'实现视觉居中 -
'top'对齐上边缘，'bottom'对齐下边缘，'ideographic'更贴合汉字字形底部（但兼容性略差） - 一旦改了
textBaseline，所有后续fillText()都受其影响，需手动重置
描边 + 填充组合容易糊成一团
想实现「白字黑边」这类效果，不能只写 strokeText() 再 fillText() —— 因为两者默认都从同一个 (x, y) 出发，描边路径和填充区域完全重叠，边缘会发虚。
- 正确做法：先
strokeText()，再fillText()，且strokeStyle和fillStyle颜色对比要足够强 - 若需清晰外框，建议把描边宽度设为
ctx.lineWidth = 2，并确保ctx.lineJoin = 'round'避免直角锯齿 - 注意：描边本身不响应
textBaseline，它始终围绕文字轮廓生成，所以基线设置仍要一致
中文显示异常？先检查字体加载是否完成
用 Web 字体（如 Google Fonts 或自定义 @font-face）时，fillText() 可能在字体还没加载完就执行，结果渲染成方块或 fallback 字体。
- 不要依赖
window.onload，它不保证字体就绪；应监听document.fonts.load() - 简单方案：
await document.fonts.load('bold 24px "Your Font Name"')再绘图 - 没做字体加载控制时，
measureText()返回的宽度可能不准，导致居中偏移
最易被忽略的点：Canvas 文字是像素级绘制，没有抗锯齿开关，也没有行高控制；换行、省略号、自动缩放这些 DOM 原生能力，在 Canvas 里全得自己算坐标、切字符串、逐行调用 fillText()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
