javascript - HTML5 Canvas 中的居中(比例字体)文本

Question

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

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

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

Answer 1

您可以使用 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);

Live Demo

More elaborate demo