Question

说我有三个号码

2.55

2353.45

232.44

我想在画布上写一下，根据下面的小数点对齐三个数字。

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

Answer 1

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

＆＃13;

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);
}

＆＃13;

#canvas{
  border: 1px solid;
}

＆＃13;

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

＆＃13;

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

1 个答案: