如何在Canvas中实现同一句子内两种不同字号文本并排显示？

嘿，这个问题其实挺常见的——Canvas的fillText()方法一次只能应用一种字体样式，所以要实现同一句子内不同字号的文本，我们得把文本拆成不同的块，分别设置字体，再精准计算每个块的绘制位置。

先看你给出的现有代码，我先纠正一个小问题：ctx.textAlign = left里的left需要加引号，不然会被当作变量处理，应该写成ctx.textAlign = 'left'。

接下来直接上修改后的实现方案，结合你的需求调整：

// 假设你已经获取了canvas和上下文
const ctx = document.getElementById('yourCanvas').getContext('2d');

ctx.textAlign = 'left';
ctx.fillStyle = '#ccc';

// 第一部分：20px 粗体文本
ctx.font = "bold 20px Arial"; // 建议明确指定字体族，避免浏览器默认差异
const firstSegment = "Normal ";
// 计算当前文本块的宽度，用于确定下一部分的起始位置
const segmentWidth = ctx.measureText(firstSegment).width;
ctx.fillText(firstSegment, 100, 300);

// 第二部分：更小字号的文本，这里用14px举例
ctx.font = "bold 14px Arial";
const secondSegment = "Small";
// 起始x坐标 = 初始x + 第一部分文本的宽度
ctx.fillText(secondSegment, 100 + segmentWidth, 300);

关键原理说明： #

• ctx.measureText(text)会返回一个包含文本宽度的对象，通过这个宽度我们能精准定位下一段文本的起始x坐标，让两段文本无缝衔接。
• 如果需要调整垂直对齐（比如避免两段文本上下错位），可以设置ctx.textBaseline = 'alphabetic'（默认值）或者'middle'，确保两段文本的基线一致。

如果需要处理更多不同字号的文本块，只需要重复这个逻辑：设置字体→绘制文本→计算宽度→累加x坐标即可。

内容的提问来源于stack exchange，提问作者user2936008