1

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

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

再次感谢您的时间，托德

4

2 回答 2

3

我成功地将像素中的字体大小转换为点，这给出了文本的像素高度（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/看到一个示例，它应该在您缩放字体大小时起作用。

于 2013-02-18T02:04:24.283 回答
1

它把它放在正确的地方。文本不会占据由字体大小定义的整个高度（即它不会是 50 像素高）。显示的高度由 定义line-height。因此，要使文本位于顶部，您需要定义line-height小于您的字体大小。

通常这样做是这样的：

normal 50px/45px Arial

第二个数字在哪里line-height。我在 的规格中看到了这一点<canvas>，但我无法让它工作。

而是line-height你所追求的。这是一个演示，显示它与<div>. 我仍在尝试让它与<canvas>.

演示： jsFiddle

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';
于 2013-02-18T01:37:13.213 回答