canvas文字绘制依赖filltext和stroketext，需显式设置font、fillstyle/strokestyle，y坐标对应基线，垂直对齐靠textbaseline，描边填充需顺序调用且坐标一致，maxwidth仅缩放不换行，真实换行需measuretext手动分段。
Canvas里画文字，靠的是fillText和strokeText这两个方法，没有别的选择。它们看着简单，但排版效果好不好，全看几个关键设置是否到位。
字体与颜色必须显式设定
这两个方法不会继承任何默认样式。调用前不设ctx.font，文字就看不见——不是报错，是静默失败。常见错误包括：
-
font写成"16px"或"Microsoft YaHei"单独出现，缺少完整CSS字体串（如"bold 16px 'Microsoft YaHei', sans-serif"） -
fillStyle或strokeStyle被设为"transparent"、"rgba(0,0,0,0)"或拼写错误的值 - 中文字体在非对应系统上失效（比如"Songti SC"在Windows上回退成无衬线体），上线前务必跨平台实测
y坐标是基线，不是顶部
传入的y值对应文字基线位置，不是最上沿。默认字体下，文字实际会从y - ascent开始绘制，下降部（descender）则延伸到y + descent。这就导致：
- 设
y = 20却只看到文字下半截，很可能是因为字号大、基线偏高 - 垂直居中对齐需配合
ctx.textBaseline = "middle"，并把y设为容器中心纵坐标 - 顶部对齐用
"top"，底部对齐用"bottom"，不同取值影响y的实际渲染位置
描边+填充组合要讲究顺序
想做出“白字黑边”这类效果，不能只靠一次调用。正确做法是：
- 先调用
strokeText()，设置strokeStyle和合适的lineWidth（Retina屏建议≥2） - 再立刻调用
fillText()，使用fillStyle填满内部 - 两次的
x、y必须完全一致，否则描边和填充会错位 - 如果只要空心字，跳过
fillText即可；若只想要轮廓加轻微填充，可调低fillStyle透明度
maxWidth不等于自动换行
这个参数常被误读。它不会让文字折行，而是强制将整段文本缩放到指定宽度内显示，可能造成字体变细、模糊，尤其在非整数缩放时：
- 中文等CJK字体在部分浏览器（如旧版Safari）中可能直接忽略
maxWidth - 真实换行需结合
measureText()逐字/逐词测量宽度，手动切分字符串 - 每行
y值需累加行高（如y += lineHeight），lineHeight通常取fontSize × 1.2~1.4 - 避免依赖浏览器自动缩放，优先控制原始文本长度或预分段
