canvas需手动实现多行文本排版：先按宽度和字体度量拆分文本，逐行调用filltext()；textalign控制水平对齐（left/center/right），textbaseline配合行高控制垂直间距；调试时可用参考线验证对齐效果。
Canvas 本身不提供原生的多行文本自动换行或段落排版能力，textAlign 只控制单行文本在指定 (x, y) 坐标处的水平锚点位置。要实现多行文字整齐排版，必须手动拆分文本、逐行调用 fillText()，并配合 textAlign 和 textBaseline 精确控制每行的位置。
先拆分文本为多行
根据画布宽度和字体度量（可用 ctx.measureText()）判断每行能容纳多少字符。常见做法是：
- 按空格或标点切分单词，逐个累加宽度，超限时换行
- 对长单词做强制截断（如使用
canvas.width - padding * 2为最大行宽） - 避免在中文中间断开（可检查 Unicode 范围，如
/[\u4e00-\u9fa5]/）
为每行设置统一的水平对齐逻辑
textAlign 在多行中需保持一致，并与你设定的“基准 x 坐标”匹配：
-
ctx.textAlign = 'left'：所有行左边缘对齐于同一x（如x = 50） -
ctx.textAlign = 'center'：所有行中心点对齐于同一x（如x = canvas.width / 2） -
ctx.textAlign = 'right'：所有行右边缘对齐于同一x（适合右对齐菜单或标签）
注意：start 和 end 在 LTR 页面中分别等价于 left 和 right，但更语义化，推荐用于国际化场景。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
垂直方向靠行高 + textBaseline 控制间距
多行之间没有自动行高，需手动计算 y 坐标增量。关键点：
- 设基础行高为
lineHeight = ctx.font.size * 1.3（1.2–1.5 是常用倍率） - 首行
y = baselineY，第二行y = baselineY + lineHeight，依此类推 -
textBaseline推荐用'alphabetic'（默认）或'middle'；若选'middle'，则每行的y应设为该行视觉中心纵坐标（即y = top + lineHeight / 2）
加辅助线验证对齐效果
调试时可临时画参考线，确认对齐是否符合预期：
- 画一条垂直线（如
x = 200），观察所有行是否按textAlign规则贴合该线 - 画一条水平线（如
y = 100），检查首行基线/中线是否准确落在该位置 - 用
strokeRect()框出每行文字边界，直观查看左右留白是否均衡
这样组合下来，即使没有 CSS 的便利性，也能做出清晰、可控、适配不同语言的多行 Canvas 文本排版。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
