canvas需手动实现文本换行与对齐：按空格或字符拆分并用measuretext测量宽度，动态截断；逐行设置y坐标（基线+行高），配合textalign控制单行锚点对齐；中英混排时应预分割并字符级校验，保留\n强制换行。

Canvas 本身不支持自动换行，也不提供段落级对齐能力。要实现整齐的多行文本排版，必须手动拆分文本、逐行测量宽度、计算坐标，并配合 textAlign 和 textBaseline 控制单行对齐方式。

按字符或词拆分，动态判断换行点

核心是用 ctx.measureText() 实时测量当前字符串宽度，超过最大允许宽度时就切分：

• 英文等空格分隔语言，推荐按单词拆（text.split(' ')），避免断词
• 中文、日文等无空格语言，需逐字符累加测量，一旦超宽就回退一位截断，确保字不被切开
• 注意：每次测量前确保 ctx.font 已正确设置，否则宽度不准

手动控制每行的绘制位置与行高

fillText() 只接受单个 (x, y) 坐标，y 是基线位置，不是上边缘：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 首行 y 设为起始基线纵坐标（如 50）
• 后续每行 y += 行高；常用行高 = 字号 × 1.2～1.5（例如 fontSize=16，lineHeight≈20）
• 若想视觉居中，可把 y 设为“该行视觉中心”，而非严格按基线递增

利用 textAlign 实现水平对齐效果

textAlign 决定的是整行文本相对于 x 坐标的锚点位置，不是“段落对齐”：

• ctx.textAlign = 'left'：所有行左边缘对齐于同一 x（适合常规左对齐）
• ctx.textAlign = 'center'：每行中心点落在同一 x 上（适合标题居中）
• ctx.textAlign = 'right'：所有行右边缘对齐于同一 x（适合右对齐说明文字）
• 注意：它不影响换行逻辑，只影响单行内部对齐

处理混合语言和特殊字符更稳妥的做法

纯空格拆分在中英混排时容易出错（比如“测试123abc”会被当一个词）。更健壮的策略是：

• 先尝试按空格/标点（如中文顿号、逗号、句号）预分割
• 对每个片段再做字符级测量，防止超宽
• 保留原始换行符（\n）作为强制换行标记，优先尊重人工分段
• 必要时缓存 measureText 结果，避免高频重绘时重复计算

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