Canvas不支持自动换行与段落级对齐，必须手动拆分文本、逐行绘制，并用measureText()测宽、textAlign/textBaseline统一锚点、lineHeight=fontSize×1.3计算行距，中英文需分别按空格或字符切分，辅以参考线验证排版。
Canvas 本身不支持自动换行和段落级对齐，所有多行文本效果都得靠手动拆分、逐行绘制，并配合 textAlign 和 textBaseline 精确控制位置。核心在于“先算再画”——用 measureText() 测宽度，按需切行，再统一锚点对齐。
怎么把长文本拆成合适宽度的多行
不能直接丢一串文字进去就指望它自动折行。得自己判断每行能放多少内容：
- 英文等空格分隔语言：按空格
split(' ')，逐个加单词，用ctx.measureText(testLine).width累计测宽，超限时存上一行，重开新行 - 中文/日文等无空格语言：必须逐字符检测，避免在字中间断开；可用正则
/[\u4e00-\u9fa5\u3040-\u309f\u30a0-\u30ff]/判断是否为汉字或假名，优先在标点（如，。！？）后换行 - 混合文本（中英夹杂）：建议先按 Unicode 范围分块（汉字一块、英文单词一块、标点一块），再按块拼接测试，兼顾可读性和断行合理性
怎么让多行文字整齐对齐
textAlign 只影响单行在指定 (x, y) 处的水平锚点，但它在多行中要“统一使用+统一参考x”，才能对齐：
-
ctx.textAlign = 'left'：所有行左边缘对齐于同一个x值（比如x = 20），适合常规左对齐正文 -
ctx.textAlign = 'center'：所有行中心点落在同一个x（如canvas.width / 2），适合标题或卡片居中说明 -
ctx.textAlign = 'right'：所有行右边缘对齐于同一个x，适合右对齐标签、时间戳等 - 推荐用
'start'和'end'替代'left'/'right'，它们会随页面方向（LTR/RTL）自动适配，更适合国际化场景
怎么控制行间距和垂直位置
Canvas 没有行高概念，垂直距离全靠你算 y 坐标增量：
- 基础行高建议设为
lineHeight = parseInt(ctx.font) * 1.3（1.2–1.5 是常用倍率） - 首行
y设为基线纵坐标（例如y = 100），第二行就是y + lineHeight，第三行是y + lineHeight * 2，以此类推 -
textBaseline推荐用'alphabetic'（默认）或'middle'；若选'middle'，那每行的y应该是该行视觉中心的纵坐标（即y = top + lineHeight / 2） - 调试时可临时画一条水平参考线（如
ctx.moveTo(0, y); ctx.lineTo(canvas.width, y)），确认首行基线是否真落在那条线上
怎么验证排版是否准确
光看文字容易误判，加辅助线能快速定位问题：
- 画一条垂直线（如
x = 200），观察所有行是否按设定的textAlign规则贴合该线 - 用
ctx.strokeRect(x, y, width, height)框出目标区域，检查文字是否在框内、留白是否均衡 - 对关键行调用
ctx.fillText('●', x, y)打点，直观看到锚点实际落点 - 中英文混排时，注意不同字体的
measureText结果可能偏差较大，建议统一设置ctx.font后再测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
