Canvas 原生不支持 textAlign = "full" 或文本两端对齐，需通过手动计算字间距或转向 HTML+CSS 渲染再转图来实现真正意义上的两端对齐效果。
canvas 原生不支持 `textalign = "full"` 或文本两端对齐，需通过手动计算字间距或转向 html+css 渲染再转图来实现真正意义上的两端对齐效果。
HTML5 <canvas></canvas> 的 2D 绘图上下文（CanvasRenderingContext2D）提供了 textAlign 属性，但其合法值仅限 "start"、"end"、"left"、"right" 和 "center" —— 官方规范中从未定义 "full" 或 "justify"。这意味着你无法像在 CSS 中设置 text-align: justify 那样，直接让 fillText() 自动拉伸单词间距以填满指定宽度。
✅ 正确理解限制：Canvas 是绘图 API，不是排版引擎
Canvas 将文本视为“路径绘制”或“位图填充”，不维护文字流、换行盒模型或软换行逻辑。因此，“两端对齐”这一依赖段落宽度、词间弹性间距和断行算法的排版行为，超出了 canvas 2D API 的设计范畴。
⚙️ 方案一：手动实现简易两端对齐（适用于单行）
若仅需单行文本在固定宽度内强制撑满（如标题），可结合 measureText() 动态计算并插入空格：
function justifyText(ctx, text, x, y, maxWidth) {
const words = text.split(' ');
if (words.length <= 1) {
ctx.fillText(text, x, y);
return;
}
const totalWidth = ctx.measureText(text).width;
const spaceNeeded = maxWidth - totalWidth + words.length * ctx.measureText(' ').width;
const gaps = words.length - 1;
const extraPerGap = gaps > 0 ? spaceNeeded / gaps : 0;
let offsetX = x;
words.forEach((word, i) => {
ctx.fillText(word, offsetX, y);
offsetX += ctx.measureText(word).width;
if (i < words.length - 1) {
offsetX += ctx.measureText(' ').width + extraPerGap;
}
});
}
// 使用示例
context.font = "18px sans-serif";
justifyText(context, "The Text", 50, 50, 300); // 强制在 300px 内两端对齐⚠️ 注意：该方法仅模拟视觉对齐，不处理连字符、CJK 字符间距、RTL 文本或自动换行，且依赖空格为唯一分隔符，鲁棒性有限。
立即学习“前端免费学习笔记（深入）”；
? 方案二：推荐生产级解法 —— HTML/CSS 渲染 + 无头截图
正如社区实践所验证，真正可靠的两端对齐应交由浏览器排版引擎完成。使用 dom-to-image（基于 html2canvas 原理增强）可将任意 HTML 结构（含 text-align: justify、Flex/Grid 布局、字体渲染、阴影等）高质量导出为 PNG 或 JPEG：
<!-- 在页面中隐藏但结构完整的“画布” --> <div id="text-container" style=" width: 400px; font: 18px/1.5 sans-serif; text-align: justify; padding: 20px; visibility: hidden; "> The quick brown fox jumps over the lazy dog. This text will be justified properly by the browser. </div>
import domtoimage from 'dom-to-image';
const node = document.getElementById('text-container');
domtoimage.toPng(node, {
bgcolor: '#ffffff',
quality: 0.95,
style: { 'font-smoothing': 'antialiased' }
})
.then(dataUrl => {
const img = new Image();
img.src = dataUrl;
document.getElementById('canvas').getContext('2d').drawImage(img, 0, 0);
})
.catch(err => console.error('Export failed:', err));✅ 优势：支持多行、自动断字（需 CSS hyphens）、响应式布局、Web Fonts、CSS 变量、甚至 SVG 内嵌；
❌ 注意：需确保目标 DOM 节点已完整渲染（避免 display: none，建议用 visibility: hidden + position: absolute 隐藏）。
? 总结
- ❌ 不要尝试为 canvas 添加不存在的
textAlign = "full"； - ✅ 单行轻量场景 → 手动空格插值 +
measureText()； - ✅ 多行/生产环境/高保真需求 → 用 HTML+CSS 排版 +
dom-to-image导出，这是目前最健壮、可维护、跨浏览器一致的解决方案。
最终选择取决于你的精度要求与技术栈约束——但请始终记住：让对的事发生在对的层上。
