HTML网页中canvas标签中绘制文字并设置字体样式的做法

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> 里画文字的两个方法，但光调用它们不设置 font 属性，文字会用浏览器默认字体（通常是 10px sans-serif），几乎不可读。

必须先设 font，再调用绘制方法

Canvas 不像 DOM 文本那样继承 CSS 样式。font 属性必须显式设置，且必须在 fillText() 或 strokeText() 之前执行，否则无效。

1. font 值格式严格类 CSS：例如 "bold 24px 'PingFang SC', 'Microsoft YaHei', sans-serif"
2. 中文字体名含空格必须加单引号或双引号，否则 Chrome/Safari 会忽略整段声明
3. 字号单位必须带 px（em、rem 不生效）
4. 如果指定的字体系统不存在，浏览器按顺序回退到下一个，最终 fallback 到 sans-serif

textBaseline 决定 y 坐标到底对齐哪条线

Canvas 的 y 坐标不是文字顶部或底部，而是「基线」（baseline）位置。默认是 alphabetic，即英文字母 x 的下沿——这会导致中文看起来偏高、被截断。

1. 中文标题常用 ctx.textBaseline = 'middle'，配合 ctx.textAlign = 'center' 实现视觉居中
2. 'top' 对齐上边缘，'bottom' 对齐下边缘，'ideographic' 更贴合汉字字形底部（但兼容性略差）
3. 一旦改了 textBaseline，所有后续 fillText() 都受其影响，需手动重置

描边 + 填充组合容易糊成一团

想实现「白字黑边」这类效果，不能只写 strokeText() 再 fillText() —— 因为两者默认都从同一个 (x, y) 出发，描边路径和填充区域完全重叠，边缘会发虚。

1. 正确做法：先 strokeText()，再 fillText()，且 strokeStyle 和 fillStyle 颜色对比要足够强
2. 若需清晰外框，建议把描边宽度设为 ctx.lineWidth = 2，并确保 ctx.lineJoin = 'round' 避免直角锯齿
3. 注意：描边本身不响应 textBaseline，它始终围绕文字轮廓生成，所以基线设置仍要一致

中文显示异常？先检查字体加载是否完成

用 Web 字体（如 Google Fonts 或自定义 @font-face）时，fillText() 可能在字体还没加载完就执行，结果渲染成方块或 fallback 字体。

1. 不要依赖 window.onload，它不保证字体就绪；应监听 document.fonts.load()
2. 简单方案：await document.fonts.load('bold 24px "Your Font Name"') 再绘图
3. 没做字体加载控制时，measureText() 返回的宽度可能不准，导致居中偏移

最易被忽略的点：Canvas 文字是像素级绘制，没有抗锯齿开关，也没有行高控制；换行、省略号、自动缩放这些 DOM 原生能力，在 Canvas 里全得自己算坐标、切字符串、逐行调用 fillText()。