如何在HTML5 Canvas中实现数字按小数点对齐显示？

我完全理解你的困扰——Canvas自带的textAlign属性确实只有那五个选项，没法直接让数字按小数点对齐。不过别担心，我们可以通过手动计算文本宽度的方式来实现这个需求，核心思路就是把每个数字拆分成整数部分和小数部分，然后以一个固定的小数点位置为基准，分别定位左右两边的文本。

具体实现步骤 #

• 先确定一个基准小数点位置（比如Canvas上的某个x坐标），所有数字的小数点都会对齐到这个位置。
• 把每个数字字符串拆分成整数部分和小数部分。
• 使用CanvasRenderingContext2D.measureText()方法分别计算整数部分和小数部分的文本宽度。
• 整数部分的起始绘制位置 = 基准x坐标 - 整数部分宽度（这样整数部分的右端刚好对齐基准点）。
• 小数部分的起始绘制位置 = 基准x坐标（直接从基准点开始绘制，自然和小数点对齐）。

完整代码示例 #

<canvas id="numberCanvas" width="400" height="300"></canvas>

<script>
const canvas = document.getElementById('numberCanvas');
const ctx = canvas.getContext('2d');

// 设置统一的字体（必须固定，否则宽度计算会出错）
ctx.font = '16px Arial';
// 文本基线设为顶部，方便统一y坐标
ctx.textBaseline = 'top';

// 要绘制的数字列表
const numbers = ['2.55', '2353.45', '232.44'];
// 基准小数点的x坐标（可以根据需求调整）
const decimalPointX = 200;
// 每行数字的y坐标间隔
const lineHeight = 40;

numbers.forEach((num, index) => {
  const y = 50 + index * lineHeight;
  
  // 拆分整数和小数部分
  const [integerPart, decimalPart] = num.split('.');
  
  // 计算整数部分的宽度
  const integerWidth = ctx.measureText(integerPart).width;
  
  // 绘制整数部分：起始x = 基准点x - 整数宽度
  ctx.fillText(integerPart, decimalPointX - integerWidth, y);
  
  // 绘制小数点
  ctx.fillText('.', decimalPointX, y);
  
  // 绘制小数部分：从基准点x加上小数点宽度的位置开始，保证间距一致
  ctx.fillText(decimalPart, decimalPointX + ctx.measureText('.').width, y);
});
</script>

关键细节解释 #

• 固定字体：一定要确保所有数字使用相同的字体和字号，否则measureText()计算出来的宽度会有偏差，导致对齐失效。
• 文本基线：设置textBaseline = 'top'可以让我们用统一的y坐标来定位每行文本，避免因字体基线不同导致的垂直偏移。
• 处理特殊情况：如果遇到没有小数部分的数字（比如123），可以默认补.00或者只绘制整数部分，保持对齐逻辑一致。
• 小数点宽度：代码里特意把小数点的宽度也算进去了，确保小数部分和小数点之间的间距一致，视觉上更整齐。

这个方法兼容性很好，所有支持Canvas的浏览器都能正常运行，而且逻辑清晰，容易扩展到更多数字或者不同的对齐需求。

内容的提问来源于stack exchange，提问作者Zain Ul Abideen