canvas 的 measuretext() 仅可靠返回 width，需结合字符/词元切分与宽度判断实现精准折行；测量前须设好 font 等样式，绘制时同步控制 lineheight 与 textalign。
Canvas 的 measureText() 本身不直接支持自动换行，但它能提供关键的宽度数据，配合字符串切分逻辑，就能实现**按容器宽度精准折行**。核心思路是：逐字/逐词测量、判断是否超限、在合适位置截断并换行。
理解 measureText 的局限与可用信息
ctx.measureText(text) 返回一个 TextMetrics 对象，目前浏览器中**只可靠提供 width 属性**（字符实际渲染宽度），其他如 actualBoundingBoxAscent 等兼容性差、不准，不宜用于行高或基线控制。
注意：
– 宽度受当前 ctx.font（字号、字体族、字重）、ctx.textAlign、ctx.textBaseline 影响，测量前必须先设置好；
– 中文、英文、标点混排时，单个字符宽度不等，不能简单用“字符数 × 平均宽度”估算。
基础逐字符折行算法（适合短文本、精度优先）
适用于标题、标签、按钮文字等对断点位置敏感的场景。逻辑是：从第一个字符开始累积拼接，每次测量当前子串，一旦超宽就回退到上一个断点。
- 设定最大宽度
maxWidth（如canvas.width - 20） - 初始化空行
line = ""，结果数组lines = [] - 遍历字符串每个字符
char：
• 将char加入line，调用ctx.measureText(line).width
• 若宽度 ≤maxWidth，继续；否则：
– 将上一版line（不含当前char）推入lines
– 重置line = char（当前字符作为新行起点） - 循环结束后，把剩余
line推入lines
优点：断点最准，不会出现单字溢出；缺点：可能在不该断的地方断（如“国际化”中间断成“国际”+“化”）。
优化：按词/空格/标点边界折行（更符合阅读习惯）
中文无空格，但可按常见断行点优化：汉字间通常可断，但避免在标点前断（如“，”、“。”、“）”前），也避免把连字符词（如“HTML5”、“iOS”）拆开。
- 预处理字符串，用正则切分为“词元”数组，例如：
text.split(/([，。！？；：""''（）【】《》、\s+])/)
这样保留分隔符，方便判断断点合法性 - 逐个累加词元，每次测量整个待定行；
超宽时，向前查找最后一个**允许断行的位置**（如空格、中文字符后、标点后），而非简单删掉最后一个词元 - 对英文，优先在空格处断；对中英文混排，遇到英文单词整体宽度超限时，再退回到该单词内部逐字符测（兜底）
示例片段逻辑：
if (currentWidth > maxWidth) {<br>
let breakIndex = lastSpaceIndex || line.length - 1;<br>
if (line[breakIndex] === '。' || line[breakIndex] === '，') breakIndex++; // 标点随前字<br>
lines.push(line.substring(0, breakIndex));<br>
line = line.substring(breakIndex);<br>
}
绘制时控制行高与对齐（让换行真正“看得见”）
测量只是第一步，绘制需同步处理垂直布局：
- 设定行高
lineHeight（建议用parseInt(ctx.font)的数值 × 1.3 ~ 1.5） - 起始绘制 Y 坐标
y = startY，每写一行后执行：y += lineHeight; - 水平对齐注意：
–textAlign = "left"：x是行左边界
–textAlign = "center"：x是容器中心，每行调用ctx.fillText(line, x, y)即可居中 - 避免文字被裁剪：确保
y + 行高 > canvas.height时提前终止或缩放字体
小技巧：用 ctx.strokeText() 临时描边，可直观看到每行实际渲染区域，验证换行是否准确。
不复杂但容易忽略：每次修改 ctx.font 后，必须重新测量；动态内容要防重复计算——可缓存已测字符串的宽度（尤其固定文案），提升性能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
