25

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

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

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

4

5 回答 5

50

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

现场演示

更详细的演示

于 2012-12-08T01:25:38.843 回答
38

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

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

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

于 2015-02-27T23:27:45.423 回答
18

developer.mozilla.org在textAlign描述中声明对齐是基于上下文方法的 x 值。fillText()也就是说，该属性不会将画布中的文本水平居中；它将文本围绕给定的 x 坐标居中。类似的适用于textBaseLine.

因此，为了使文本在两个方向上居中，我们需要设置这两个属性并将文本定位在画布的中间。

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

ctx.fillText('Game over', canvas_width/2, canvas_height/2);
于 2015-10-12T13:40:36.627 回答
1

您可以使用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);
于 2020-08-14T15:26:15.703 回答
-5

您所做的是使用负文本缩进将文本渲染到屏幕外，然后获取大小。

text-indent: -9999px

请参阅：使用“文本缩进”隐藏文本

于 2012-12-07T21:39:01.113 回答