Canvas 文字绘制仅支持 fillText() 和 strokeText() 两种方法，需手动处理对齐、字体语法、测量与换行；文字定位以基线为基准，居中推荐 textAlign='center' + textBaseline='middle'。
Canvas 的 fillText 和 strokeText 是唯二可用的文字绘制方法
HTML5 Canvas 没有 text() 或 drawText() 这类方法，更不存在 _text 这样的私有或非标 API。所有文字渲染必须通过 fillText()（实心字）或 strokeText()（描边字）完成。试图调用不存在的 _text 会直接报 TypeError: ctx._text is not a function。
这两个方法签名一致：ctx.fillText(text, x, y [, maxWidth])，其中 maxWidth 是可选参数，用于自动缩放或截断超长文本。
文字对齐和基线经常导致定位“偏移”，必须手动校准
Canvas 文字默认以 x 为水平起点、y 为**文字基线（baseline）位置**，不是顶部也不是中心——这和 CSS 直觉相反。常见表现是：明明设了 y = 50，文字却“飘”在 canvas 上方或沉到底部。
-
ctx.textAlign = 'center'控制水平对齐（'left'/'center'/'right'） -
ctx.textBaseline = 'middle'控制垂直对齐（'top'/'hanging'/'middle'/'alphabetic'/'bottom'） - 最稳妥的居中组合是：
textAlign = 'center'+textBaseline = 'middle'，此时(x, y)就是文字视觉中心点
字体设置必须用完整 CSS 字体语法，且不支持 font-weight 数值
ctx.font 接受类似 CSS 的字符串，但有硬性限制：不能只写 '16px sans-serif' 就完事，必须包含字号、行高（可省略）、字体族；同时 font-weight 只认关键字（'bold'、'normal'），不识别 '600' 或 700 这类数字值，否则整条 font 设置失效，回退到浏览器默认字体（通常是 10px sans-serif）。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
ctx.font = 'bold 18px "Helvetica Neue", sans-serif'; ctx.font = 'normal 14px monospace'; // ❌ 错误：数字 weight、缺少字号、引号不匹配 // ctx.font = '600 14px Arial'; // ctx.font = '14px Arial'; // ctx.font = 'bold 14px "Arial';
文字测量和换行需手动实现，Canvas 原生不支持自动折行
当需要显示多行或适配容器宽度时，ctx.measureText(text) 返回 { width }，但仅针对单行。换行逻辑必须自己写：切分空格/标点、逐词累加宽度、超过阈值则换行。
简单按空格分词+贪心换行的最小可行逻辑：
function wrapText(ctx, text, maxWidth) {
const words = text.split(' ');
let lines = [];
let currentLine = '';
for (let word of words) {
const testLine = currentLine + (currentLine ? ' ' : '') + word;
const metrics = ctx.measureText(testLine);
if (metrics.width <= maxWidth) {
currentLine = testLine;
} else {
if (currentLine) lines.push(currentLine);
currentLine = word;
}
}
if (currentLine) lines.push(currentLine);
return lines;
}
// 使用：
const lines = wrapText(ctx, 'Hello world this is long text', 200);
lines.forEach((line, i) => {
ctx.fillText(line, 100, 50 + i * 24); // 行高 24px
});
注意：中文等无空格语言需改用字符级遍历，且要考虑 ctx.font 实际加载状态——若字体未就绪，measureText 可能返回异常小的宽度。
Canvas 文字本质是像素绘制，没有 DOM 文本的排版能力。所有“看起来该有的功能”——比如自动换行、颜色渐变填充、阴影模糊、RTL 支持——都得靠组合 shadowColor、createLinearGradient、手动拆解 Unicode 区段等手段补全。别指望它像
