html5画布放置文字太低了？

Question

我正在玩元素，当我在画布上放置文字时它太低了。

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var imageObj = new Image();

  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    context.textBaseline = 'top';
    context.font = 'normal 50px Arial';
    context.fillText("1AFG", 0, 0);
  };
  imageObj.src = 'http://planttagmaker.herobo.com/images/tag_templates/hibiscus_template.png';

文本位于画布顶部下方10-20像素处。有人可以解释原因吗？我确信我可能误解了基线。基本上我希望文本在画布的顶部。 X和Y坐标是动态的，因此仅使用从y坐标减去10或20 px不是一个可行的解决方案。

再次感谢您的时间， 托德

Answer 1

我通过将字体大小（以像素为单位）转换为点来获得成功，这提供了文本的像素高度（http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/）。然后我将该值用于y位置，将textBaseline保持为默认值，按字母顺序排列。

以下是代码：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function () {
    var fontSize = 50;
    context.drawImage(imageObj, 0, 0);
    context.font = 'normal ' + fontSize + 'px Arial';
    context.fillText("1AFG", 0, pixelsToPoints(fontSize));
};
imageObj.src = 'http://planttagmaker.herobo.com/images/tag_templates/hibiscus_template.png';

function pixelsToPoints(pixels) {
    return pixels * 72 / 96;
}

您可以在http://jsfiddle.net/5Mxez/看到一个示例，该示例在缩放字体大小时应该有效。

Answer 2

将它放在正确的位置。文本不占用字体大小定义的整个高度（即它不会高50px）。显示的高度由line-height定义。因此，要使文本位于顶部，您需要定义小于字体大小的line-height。

通常情况如下：

normal 50px/45px Arial

第二个数字是line-height。我在<canvas>的规范中看到了这一点，但我无法让它发挥作用。

但line-height就是你所追求的。这是一个演示，显示它使用<div>。我仍然试图使用<canvas>。

演示：

HTML：

<div id="myDiv">1AFG</div>
<canvas id="myCanvas"></canvas>

CSS：

#myDiv {
    background-image: url( 'http://placekitten.com/100' );
    width: 100px;
    height: 100px;
    font: 50px/40px Arial;
}

脚本：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    context.textBaseline = 'top';
    context.font = '50px/40px Arial';
    context.fillText("1AFG", 0, 0);
};
imageObj.src = 'http://placekitten.com/100';