HTML5画布中的中心(比例字体)文本

Question

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

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

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

TIA,

Answer 1

您可以使用measureText执行此操作

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);

现场演示

更详细的演示

Answer 2

如果你没有necesserilly需要文本的宽度,但只想中心文本你可以做

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

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

Answer 3

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

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

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

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