javascript - 如何在HTML5 Canvas中按小数点对齐文本

说我有三个数字

2.55

2353.45

232.44

我想写在画布上，以便三个数字根据小数点对齐，如下所示。

我知道context.textAlign属性，但是它只有5个选项：left，right，center，start，end。
我已经在互联网上搜索过，但找不到任何帮助。请帮助。

最佳答案

您可以使用measureText()方法及其返回的TextMetrics对象，以计算点之前数字的宽度。

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  texts = [];
ctx.font = '14px sans-serif';
// fill our array with test-cases
for(var i=0; i<7; i++)
  texts.push(randLengthedNum() + '.' + randLengthedNum());

texts.forEach(drawText);

function drawText(str, i) {
  var left_part = str.split('.')[0],
    // get the width of the left part
    left_width = ctx.measureText(left_part).width,
    // the width of the dot
    dot_width = ctx.measureText('.').width,
    // places the '.' at center of the canvas
    x = (canvas.width / 2) - (left_width + (dot_width / 2));
  ctx.fillText(str, x, (i+1) * 20);
}

// return random lengthed numbers
function randLengthedNum(){
  return (Math.random()).toFixed(2+(Math.random()*8)|0).substr(2);
}

#canvas{
  border: 1px solid;
}

<canvas id="canvas"></canvas>