HTML5 画布中的居中（比例字体）文本

Question

我希望能够在我可以计算的矩形区域内将单行文本居中。我希望在画布上的 2D 几何中做的一件事是将宽度未知的东西居中。

我听说有一种变通方法，您可以在 HTML 容器中创建文本，然后调用 jQuery 的 width() 函数，但我没有正确处理文档正文的瞬时添加？宽度为0。

如果我有一行文本，比填满屏幕的大部分宽度要短得多，我怎么知道在我知道的字体大小下它在画布上的宽度是多少？

原文由 Christos Hayward 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您不需要文本的宽度，但只想将文本居中，您可以这样做

  canvas_context.textBaseline = 'middle';
  canvas_context.textAlign = "center";

这应该将文本垂直和水平居中。

原文由 Marcin Raczkowski 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 measureText 来做到这一点

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

canvas.width = 400;
canvas.height = 200;

ctx.fillStyle = "#003300";
ctx.font = '20px sans-serif';

var textString = "Hello look at me!!!",
    textWidth = ctx.measureText(textString ).width;

ctx.fillText(textString , (canvas.width/2) - (textWidth / 2), 100);

现场演示

更详细的演示

原文由 Loktar 发布，翻译遵循 CC BY-SA 4.0 许可协议