Canvas文本自动换行需JavaScript手动实现：先用measureText测宽，再按字符（兼容中英文混排）或单词（适合英文）切分，注意字体设置、真实行高计算、对齐方式统一、超行截断省略号及封装复用。
Canvas 本身不支持自动换行，必须靠 JavaScript 手动切分文本并逐行绘制。核心思路是：用 measureText() 测宽度，按字符或词累计，超宽就截断、换行、重置宽度计数，再继续。
按字符逐个测量（兼容中英文混排）
适合中文、emoji、长串无空格文本（如用户昵称“啊啊啊啊…”），避免单词被硬切开。
- 把字符串转为字符数组（注意用
Array.from(str)正确处理 emoji 和代理对） - 逐个累加字符，每次调用
ctx.measureText(currentLine + nextChar).width - 若累加后超限，就把当前行绘制，然后从 nextChar 开始新行
- 最后一行别漏掉
按单词分割（适合英文为主+空格分隔）
更符合英文阅读习惯，保留单词完整性，但对纯中文或无空格文本效果差。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 用
text.split(' ')得到单词数组 - 拼接单词时带空格，测
testLine = line + word + ' '的宽度 - 超限时绘制上一行，新行以当前单词开头
- 需判断
i > 0防止首词就超宽导致空行
关键细节不能跳过
很多翻车都因忽略这些：
立即学习“Java免费学习笔记（深入）”；
-
字体必须提前设置好：调
measureText前，ctx.font已赋值（如"16px Microsoft YaHei"），否则宽度不准 -
行高要手动算：不能只靠经验加 20px；建议用
ctx.measureText('M').actualBoundingBoxAscent + actualBoundingBoxDescent + 4获取真实行高 -
对齐方式要统一：
ctx.textAlign = 'left'或'center'，配合每行x坐标计算（居中时用x + (maxWidth - lineWidth)/2） -
超两行需截断+省略号：在循环里加计数，到第 n 行时用
str.substring(0, len-1) + '…'，再测宽确保不溢出
封装成可复用方法（推荐）
把逻辑抽成函数，支持传入最大宽度、行高、对齐方式等参数，避免每次重复写。
- 扩展
CanvasRenderingContext2D.prototype.fillTextWrap = function(...)，不污染全局又方便调用 - 支持
ellipsis: true参数，自动处理省略号逻辑 - 支持
lineHeight: 'auto'，内部自动测算真实字体高度 - 返回实际绘制行数，便于后续布局（比如留白、定位按钮）
