canvas多行文字居中需手动拆分、逐行定位并协同textalign与textbaseline:水平居中统一设x=canvas.width/2+textalign='center';垂直居中通过计算总高与lineheight,设首行y及textbaseline='middle'实现。

Canvas本身不支持自动换行或段落居中,多行文字居中对齐必须靠手动拆分+逐行定位+对齐参数协同控制。核心是把“居中”拆解为水平居中和垂直居中两个独立任务,分别用textAlign和textBaseline配合坐标计算来实现。
水平居中:统一基准x + textAlign = 'center'
所有行共用同一个水平中心参考点(比如画布宽度一半),再设置ctx.textAlign = 'center',这样每行调用fillText(text, x, y)时,x就是该行的视觉中心横坐标。
- 推荐用
x = canvas.width / 2作为统一中心x,避免因padding或边距引入偏移 - 不要混用
'left'和'center'——同一组多行文本必须保持textAlign一致,否则各行锚点逻辑冲突 - 中文、英文、数字混合时,
'center'仍有效;无需额外处理字符类型
垂直居中:算出行高 + textBaseline = 'middle'
垂直方向没有自动居中机制,需先确定整体文本块的总高度,再推算首行y坐标,其余行按固定行高递增。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告,或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控,编排:网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词:生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 单行高度建议用
lineHeight = parseInt(ctx.font) * 1.3(如font为"16px sans-serif",则lineHeight≈21) - 设文本块总高为
totalHeight = lines.length * lineHeight,则首行y =canvas.height / 2 - totalHeight / 2 + lineHeight / 2 -
ctx.textBaseline = 'middle'确保每行y值对应其视觉垂直中心,而非基线
拆行与定位:先分段,再逐行绘制
不能直接传入带换行符的字符串,必须主动切分成数组,每行单独调用fillText。
- 用
ctx.measureText()逐字/逐词累加宽度,超限即换行;中文尽量按字切(避免在字中间断开) - 每行y坐标 = 首行y + 行索引 × lineHeight
- 每行x坐标固定为统一中心x(如
canvas.width / 2),由textAlign = 'center'保障水平居中
调试技巧:画线验证,避免凭感觉调整
肉眼判断容易出错,临时加几条参考线能快速定位问题。
- 画一条垂直线:
ctx.moveTo(canvas.width/2, 0); ctx.lineTo(canvas.width/2, canvas.height); ctx.stroke();——所有文字中心应落在该线上 - 画一条水平线:
ctx.moveTo(0, canvas.height/2); ctx.lineTo(canvas.width, canvas.height/2); ctx.stroke();——整个文本块的视觉中心应与此线重合 - 用
strokeRect(x - width/2, y - height/2, width, height)框出每行实际占位,检查左右是否对称










