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

Posted 2023-03-05

【中文标题】HTML5 画布中的中心（比例字体）文本

【英文标题】：Center (proportional font) text in an HTML5 canvas

【发布时间】：2012-11-26 02:48:09

【问题描述】：

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

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

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

【问题讨论】：

在读取元素的宽度之前不要为元素设置display: none。

【参考方案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);

Live Demo

More elaborate demo

【讨论】：

@ChristosHayward ...除了它不再被接受。

@DavidsKanal 好吧.. 他的评论来自 2012 年 ;)

@Loktar 这感觉就像一台时间机器：D

【参考方案2】：

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

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

这应该使文本垂直和水平居中。

【参考方案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);

【讨论】：

好评！ API 没有说 ctx.textAlign = 'center' 以 ctx.fillText('text', x, y) 的 x 值为中心 ...研究时间 ...

【参考方案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);

【参考方案5】：

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

text-indent: -9999px

见：hiding text using "text-indent"

【讨论】：

我不明白这与所提出的问题有什么关系。他正在寻找尺寸，以便将它们放在画布中。

认为他的回答与提到的 workaround JonathanHayward 有关，但直接询问文本宽度到画布（如您的回答）更好（更可靠）这个案例。

Loktar，请阅读问题“我没有正确处理文档正文的瞬时添加并且宽度为 0。” -- 那是因为你无法测量隐藏的内容。另一种方法是让它可见但不在屏幕上，这样用户就看不到它，然后测量它。