measuretext() 提供文本像素宽度测量能力，需先设置完整 font 样式；可结合二分法缩放字号实现 fit text，或手动分词实现多行自适应换行，注意其 width 不含行高且基于 css 像素。

Canvas 中的 measureText() 本身不直接支持“自适应宽度”，但它提供了测量文本像素宽度的核心能力，结合逻辑判断和字体缩放，就能实现文本在指定容器内自动缩放、换行或截断等自适应效果。

用 measureText() 获取准确文本宽度

调用 context.measureText(text) 返回一个 TextMetrics 对象，其中 width 属性是该文本在当前字体设置下的实际渲染宽度（单位：像素）。

注意：结果受 font 属性影响极大，必须先设置好完整的字体样式（如 "bold 16px Arial"），否则测量不准。

• 确保 ctx.font 已正确赋值，包括字号、字重、字体族
• 中英文混排时，不同字体对宽度影响明显，建议统一 fallback 字体
• 避免在未设置 font 时调用 measureText，会按默认（通常是 10px sans-serif）计算，导致偏差

实现固定宽度内自动缩放字号（Fit Text）

给定最大可用宽度 maxWidth，通过二分法或逐步试探调整 fontSize，使 measureText(text).width ≤ maxWidth。

示例逻辑：

• 设定初始字号（如 48px）和上下限（如 8–96px）
• 循环中设置 ctx.font = `${size}px ${family}`，再测宽
• 若超宽则减小字号，反之可略增大以充分利用空间
• 推荐用 20–30 次二分足够收敛，兼顾性能与精度

多行文本 + 自适应换行（Word Wrap）

纯 Canvas 不支持自动换行，需手动切分文本。核心思路是：逐词/逐字符测量，累计宽度，超限时换行。

• 将文本按空格拆分为单词数组，保留空格逻辑或使用正则分词
• 维护当前行字符串和已用宽度，对每个单词尝试追加后测量
• 若新宽度超限，就把当前行绘制，重置为该单词并继续
• 对长单词（如 URL）可启用字符级切分，防止单个词溢出

注意事项与常见坑

measureText().width 是“水平度量宽度”，不含上下留白或行高；它也不反映实际渲染时的 hinting 或 subpixel 差异，因此测量值 ≈ 渲染占位宽度，但可能略小于视觉感知宽度。

• 移动端高清屏（devicePixelRatio > 1）下，Canvas 绘制需考虑缩放，但 measureText 始终基于 CSS 像素，无需额外换算
• 使用 ctx.textAlign 和 ctx.textBaseline 会影响绘制位置，但不影响 measureText 结果
• 避免频繁读写 ctx.font，可在测量前统一设置，减少状态切换开销

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！