html5画布放置文本太低？答案

【问题标题】：html5 canvas placing text too low?html5画布放置文本太低？
【发布时间】：2013-02-18 01:10:54
【问题描述】：

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

  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 并不是一个可行的解决方案。

再次感谢您的宝贵时间，托德

【问题讨论】：

你能在画布标签周围显示标记吗？我发现 CSS 声明有时可以抵消画布中的内容。

标签： jquery html text canvas

【解决方案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/ 看到一个示例，它应该在您缩放字体大小时起作用。

【讨论】：

+1 不错。我猜line-height 不适用于<canvas>。你的方法似乎是唯一的方法。

【解决方案2】：

它把它放在正确的地方。文本不会占据由字体大小定义的整个高度（即它不会是 50 像素高）。显示的高度由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';

【讨论】：