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

Question

假设我有三个数字

2.55

2353.45

232.44

我想在 Canvas 上书写，使三个数字按照小数点对齐，如下所示。

     2.55

  2353.45

   232.44

我知道 context.textAlign 属性，但它只有 5 个选项:左、右、中心、开始、结束。 我在互联网上搜索过，但找不到任何帮助。请帮忙。

Answer 1

您可以使用 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>