根据字体大小在画布中垂直居中文本[重复]答案

【问题标题】：Vertically Centering Text In Canvas Based on Font Size [duplicate]根据字体大小在画布中垂直居中文本[重复]
【发布时间】：2016-06-15 06:02:59
【问题描述】：

如何根据分配的字体大小垂直对齐画布中的文本？例如，我有一个高度为 100px 的矩形和变量textSize。我的目标是始终在此特定矩形内垂直居中文本。

Link to JS Fiddle

HTML

<canvas id="canvas" width="500" height="100"></canvas>

var textSize = 40;

function init() {

    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.lineTo(0, 100);
    ctx.lineTo(0, 0);
    ctx.lineTo(500, 0);
    ctx.lineTo(500, 100);
    ctx.closePath();
    ctx.fillStyle = "#000";
    ctx.fill();
    ctx.closePath();

    // Text
    ctx.save();
    ctx.font = textSize + "px 'Oswald'";
    ctx.fillStyle = "#fff";
    ctx.textBaseline="middle";
    ctx.fillText("Hello, World", 100, (100 - textSize)/2);
    ctx.restore();
}

window.onload = init();

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

This 回答可能会有所帮助

画布的上下文有一个measureText 可以使用的函数。

【讨论】：

是的，这看起来是正确的答案。特别是考虑到不同的字体。
stackoverflow.com/questions/1134586/…
@Beep。虽然您的链接很有帮助，但请不要发布仅链接的答案——即使链接指向 Stackoverflow 本身。相反，将您的链接发布为对原始问题的评论，而不是作为答案。这有助于我们避免在 Stackoverflow 上出现重复的问答。 :-)

【解决方案2】：

当您使用textBaseline= "middle" 时，为什么要考虑textSize 来计算y 坐标？可能

ctx.fillText("Hello, World", 100, 50);

这将为您完成这项工作。

【讨论】：

我正在寻找一个在textSize 变量发生变化时有效的计算。不过，也许对齐顶部或底部会使事情变得更容易？