javascript - 以像素为单位的字符大小

Question

我正在尝试在 HTML5 Canvas 中创建文本框，我知道您实际上不能这样做，所以我正在创建一个框并在同一位置创建一些文本。但是，我想确保文本保留在框中，所以我需要知道部分文本何时超出框。我想我应该能够根据像素测量文本，然后将其与框进行比较。我的问题是，如何使用 javascript 测量任何给定字体的字符大小？

Answer 1

您可以使用 context.measureText 获取指定文本的宽度:

// set the font

context.font = "14px verdana";

// use measureText to get the text width

var textWidth = context.measureText("Measure this!").width;

文本换行看起来像这样:

function wrapText(context, text, x, y, maxWidth, fontSizeFace) {
  var words = text.split(' ');
  var line = '';
  var lineHeight=measureTextHeight(fontSizeFace);

  for(var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if(testWidth > maxWidth) {
      context.fillText(line, x, y);
      line = words[n] + ' ';
      y += lineHeight;
    }
    else {
      line = testLine;
    }
  }
  context.fillText(line, x, y);
}