将背景框与画布上的文本对齐

Question

我正在使用以下代码：

function measureText(text, font) {
    const span = document.createElement('span');
    span.appendChild(document.createTextNode(text));
    Object.assign(span.style, {
        font: font,
        margin: '0',
        padding: '0',
        border: '0',
        whiteSpace: 'nowrap'
    });
    document.body.appendChild(span);
    const {width, height} = span.getBoundingClientRect();
    span.remove();
    return {width, height};
}

function drawTextBG(ctx, txt, font, x, y) {
  ctx.save();
  ctx.font = font;
  ctx.textAlign = "center";
  ctx.textBaseline = 'center';
  ctx.fillStyle = '#FFFFFF';  
  var dimen = measureText(txt, font)
  var height = dimen['height']
  var width = dimen['width']
  ctx.fillRect(x - width/2, y-height/2, width, parseInt(font, 10));
  ctx.fillStyle = '#000000';
  ctx.fillText(txt, x, y);
  ctx.restore();
}

我得到以下图像，其中白色背景不能完美地捕获文本。如何修改代码以使白色背景中的文本完美对齐。

我也想动态创建背景框的高度。

有效的沙盒代码为here

Answer 1

我认为将padding设置为“ 5％”就可以了，我只需对其进行测试[此处]（https://codesandbox.io/s/fervent-sanderson-bwl8h?fontsize=14）即可。