Canvas中如何为同一段文本设置部分加粗、部分普通的格式？

嘿，我之前也碰到过这个困扰！Canvas原生的fillText/strokeText方法确实不支持在同一段文本里直接混合不同样式，但咱们可以通过拆分文本块分别绘制的方式来实现需求，操作起来其实很简单～

核心思路 #

把需要不同样式的文本拆分成独立片段，分别设置对应样式后，按顺序绘制在画布上。关键是要计算前一个文本块的宽度，让后续文本能精准衔接，看起来像是完整的一段。

具体代码示例 #

假设我们要绘制"The Text"，其中"The "加粗，"Text"保持普通样式：

// 获取画布和上下文
const canvas = document.getElementById('yourCanvasId');
const ctx = canvas.getContext('2d');

// 1. 绘制加粗的"The "
ctx.font = 'bold 24px Arial'; // 加粗字体设置
ctx.fillStyle = '#333'; // 文本颜色
const boldSegment = 'The ';
ctx.fillText(boldSegment, 60, 60); // 起始坐标(x, y)

// 2. 计算加粗文本的宽度，用于定位下一段文本的起始位置
const boldWidth = ctx.measureText(boldSegment).width;

// 3. 绘制普通样式的"Text"
ctx.font = '24px Arial'; // 取消加粗，恢复普通字体
ctx.fillText('Text', 60 + boldWidth, 60); // 起始x坐标 = 前一段x坐标 + 前一段宽度

扩展说明 #

• 如果需要更多样式混合（比如斜体、不同颜色），都可以用这个思路，逐个处理文本片段即可。
• measureText()方法是关键，它能精准返回当前字体下文本的宽度，确保文本块之间不会重叠或出现空隙。
• 如果文本需要换行，还可以结合换行逻辑，计算每行的宽度和高度来调整绘制位置。

这样就能完美实现单段文本内的差异化格式啦！

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