canvas文本渲染需精确控制字体、坐标、对齐与绘制顺序：font须为完整css字符串，y为基线坐标，textbaseline/textalign决定对齐基准，描边填充需分步调用且坐标一致，换行须手动测量而非依赖maxwidth。
Canvas 文本渲染不是“写进去就完事”，而是需要精确控制字体、坐标、对齐和绘制顺序的一整套操作。核心在于理解 fillText 和 strokeText 的行为边界，以及它们依赖的上下文状态。
font 必须完整设置，不能拆分
ctx.font 是一个完整 CSS 字体字符串，缺一不可。只写 "16px" 或 "Arial" 会被忽略，回退到默认的 "10px sans-serif"。
- 推荐格式："bold 16px 'PingFang SC', 'Microsoft YaHei', sans-serif"（中文字体加英文回退）
- 单位只认 px；em/rem 在 Canvas 中效果不可靠，pt/cm 基本不用
- 动态改 font 后，必须重新调用 fillText/strokeText，已有文字不会自动更新
- Web 字体需确保加载完成——可用 document.fonts.load() 监听，否则可能渲染成空白或错位字体
y 坐标是基线，不是顶部
传入的 y 值对应的是文字基线（baseline），不是最上沿。默认情况下，小写字母 “x” 的底部大致对齐 y，但实际文字会从 y − ascent 开始，向下延伸至 y + descent。
- 设 y = 20 却只看到下半截？很可能是字号大、ascent 高，文字整体上移了
- 垂直居中用 ctx.textBaseline = "middle"，再把 y 设为容器中心纵坐标
- 顶部对齐用 "top"，底部对齐用 "bottom"，不同取值直接影响 y 的渲染基准
- 水平对齐靠 ctx.textAlign（"left"/"center"/"right"），配合 x 坐标实现精准定位
描边+填充要分两步，且坐标一致
想实现“白字黑边”或渐变描边+渐变填充，不能靠一次调用。必须先描边、再填充，两次使用完全相同的 (x, y)。
- 先设 ctx.strokeStyle 和 ctx.lineWidth（Retina 屏建议 ≥2）
- 调用 strokeText(text, x, y)
- 再设 ctx.fillStyle（可为纯色、线性/径向渐变）
- 调用 fillText(text, x, y)
- 若只想要轮廓，跳过 fillText；若要半透填充，可设 fillStyle 为 rgba(0,0,0,0.3)
换行不能靠 maxWidth，得手动分段
maxWidth 参数常被误解为“自动换行”，其实它只是强制缩放整段文本以适配宽度，会导致模糊、变形，甚至在旧 Safari 中被忽略。
- 真实换行必须结合 ctx.measureText() 逐词或逐字符测量宽度
- 遇到空格或标点时判断是否超限，切分后按行累加 y（如 y += fontSize × 1.3）
- 中文无空格分隔，建议按字测量并缓存宽度，或预定义最大字符数作为安全上限
- 富文本场景下，数据应以字符粒度组织，每个字符带独立样式，便于精确定位与换行计算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
