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

Question

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

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

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

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

现场演示

更详细的演示

Answer 2

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

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

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

Answer 3

developer.mozilla.org在textAlign描述中声明对齐是基于上下文的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

对于水平居中，我们使用ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; . 但是要垂直居中，我们需要使用ctx.measureText 。

(actualBoundingBoxAscent - actualBoundingBoxDescent) / 2很重要，因为对于不同的字体，文本可以以不同的方式垂直对齐。

 // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry/59143499#59143499 function setCanvas(canvas, w, h) { canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; const scale = window.devicePixelRatio; canvas.width = w * scale; canvas.height = h * scale; const ctx = canvas.getContext('2d'); ctx.scale(scale, scale); } const width = 160; const height = 160; const fontSize = 100; const text = 'A'; const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); setCanvas(canvas, width, height); ctx.fillStyle = 'red'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'white'; ctx.font = `${fontSize}px sans-serif`; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; let { actualBoundingBoxAscent, actualBoundingBoxDescent } = ctx.measureText(text); ctx.fillText(text, width / 2, height / 2 + (actualBoundingBoxAscent - actualBoundingBoxDescent) / 2);

 canvas{ outline: 1px black solid }

 <canvas><canvas>

Answer 6

对于那些想知道如何正确对齐高度的人，因为measureText()不返回高度（！）。

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const centered = (text, size) => { ctx.font = size + 'px monospace'; let s = ctx.measureText(text).width; ctx.fillText(text, canvas.width / 2 - s / 2, canvas.height / 2 + size / 4); } /* Just for the demo, really! * Please don't do this! * Use proper animation frames requests * and clear timeout(s)!!! */ [["is", 40], ["able",45], ["<-- to -->",50], ["FLEX", 55], [" SMOOTH!", 58], ["FLEX!!", 62], ["FLEX!!!", 63] ].forEach((e) => { setTimeout(() => { ctx.clearRect(0, 0, canvas.width, canvas.height) centered(e[0], e[1]) }, e[1]*100) }) // Intro test centered("CANFLEX", 50)

 canvas{ outline: 1px black solid }

 <canvas><canvas>

Answer 7

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

text-indent: -9999px

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