javascript - Canvas 2d 上下文的measureText() 方法有时会给出不同的宽度

Question

我正在使用 Canvas 2d 上下文来计算文本的宽度

例如: canvas2DContext.measureText('Sivakumar Tadisetti')

我使用的字体为粗体15px“Open Sans”，衬线

问题: 有时 measureText() 给出 119.4835，有时给出 115.3423 作为宽度。

为什么我得到不同的宽度。我在这里做错了什么？请找到下面的片段。

var canvas = document.createElement('canvas');
var canvas2DContext = canvas.getContext('2d');

var textWidth = canvas2DContext.measureText("Sivakumar Tadisetti").width;

Answer 1

有点盲目，但对我来说，这听起来像是您没有正确等待字体加载:

const ctx = canvas.getContext('2d');
ctx.font = 'bold 15px "Open Sans", serif'

const before_load = ctx.measureText("Sivakumar Tadisetti").width;
console.log('before', before_load);

// load the font
document.fonts.ready
  .then(() => {
    ctx.font = 'bold 15px "Open Sans", serif'
    const after_load = ctx.measureText("Sivakumar Tadisetti").width;
    console.log('after', after_load);
  });

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
<canvas id="canvas"></canvas>

为了避免这种情况，您可以执行 document.fonts.ready 中的代码Promise 的回调:

document.fonts.ready.then(startYourCode);

document.fonts.ready.then(() => {
  const ctx = canvas.getContext('2d');
  ctx.font = 'bold 15px "Open Sans", serif'

  const textWidth= ctx.measureText("Sivakumar Tadisetti").width;
  console.log(textWidth);
});

#canvas { font-family: "Open Sans"; }

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<canvas id="canvas"></canvas>