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

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

我听说可以在HTML容器中创建文本，然后调用jQuery的

width（）

函数，但我没有正确处理文档正文中的瞬间添加？宽度为0

---

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

你要做的是使用负文本缩进在屏幕外渲染文字，然后抓取大小

text-indent: -9999px

请参阅：

您可以使用

---

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

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

应将文本垂直和水平居中放置。

在

textAlign

说明中说明 对齐基于上下文的

fillText（）

方法的x值。也就是说，该属性不会使画布中的文本水平居中；它使文本围绕给定的x坐标居中。类似情况也适用于

textbreeline

所以为了使文本在两个方向上居中，我们需要设置 两个属性并将文本放置在画布中间。< /P>

ctx.textBaseline = 'middle'; 
ctx.textAlign = 'center'; 

ctx.fillText('Game over', canvas_width/2, canvas_height/2);

---

您可以使用ctx.textAlign=“center”将项目与中心对齐

var canva = document.getElementById("canvas");
ctx.textAlign = "center"; // To Align Center
ctx.font = "40px Arial"; // To change font size and type
ctx.fillStyle = '#313439'; // To give font 
ctx.fillText("Text Center", 150 ,80);

---

Ḋ在读取元素宽度之前，不要设置元素的

display:none

。我不明白这与所问的问题有什么关系。他希望得到尺寸，这样他就可以在画布中居中。我认为他的答案与JonathanHayward提到的解决方法有关，但在这种情况下，直接询问文本与画布的宽度（如你的答案）更好（也更可靠）。Loktar，阅读问题“我没有正确处理文档正文中的瞬间添加，因此得到的宽度为0。“--这是因为无法测量隐藏内容。另一种方法是让它在屏幕外可见，这样用户就看不到它，然后测量它。@ChristosHayward…除了它不再被接受之外。@DavidsKanal well。。他的评论来自2012年；）@Loktar这感觉就像一台时间机器：DGood comment！API没有说ctx.textAlign='center'从ctx.fillText的x值居中（'text'，x，y）。。。研究时间。。。

var canva = document.getElementById("canvas");
ctx.textAlign = "center"; // To Align Center
ctx.font = "40px Arial"; // To change font size and type
ctx.fillStyle = '#313439'; // To give font 
ctx.fillText("Text Center", 150 ,80);