Question

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

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

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

TIA，

Answer 1

执行此操作

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

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

ctx.fillStyle = "#003300";
ctx.font = '20px san-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

Answer 2

如果你不需要文字的宽度，但只想让文字居中，你可以做到

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

哪个文本应该垂直和水平放置文本。

Answer 3

textAlign描述中的

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

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

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

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

Answer 4

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

Answer 5

您所做的是使用否定文字缩进在屏幕外渲染文字，然后抓住尺寸。

text-indent: -9999px

请参阅：hiding text using "text-indent"

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

5 个答案: