HTML5canvas中的中心（比例字体）文本
我希望能够在我可以计算的矩形区域中居中单行文本。 我期望在canvas上的二维几何中做的一件事是将宽度未知的东西居中。
我听说作为一种解决方法，您可以在HTML容器中创建文本，然后调用jQuery的width（）函数，但是我没有正确处理文档正文的瞬间添加？ 并得到宽度为0。
如果我有一行文本，比填充屏幕中的大部分宽度短得多，我如何知道在我知道的字体大小的canvas上有多宽？
TIA，
如果你没有necesserilly需要文本的宽度，但只想中心文本你可以做
canvas_context.textBaseline = 'middle'; canvas_context.textAlign = "center";
哪个文本应该垂直和水平放置文本。
您可以使用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);
现场演示
更详细的演示
developer.mozilla.org在textAlign描述中声明对齐基于上下文的fillText()方法的x值 。 也就是说，属性不会将文本水平居中放置在canvas中; 它使文本围绕给定的x坐标居中。 类似适用于textBaseLine 。
因此，为了使文本在两个方向上居中，我们需要设置这两个属性并将文本放在canvas的中间。
ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.fillText('Game over', canvas_width/2, canvas_height/2);
你所做的是使用负文本缩进在屏幕外渲染文本，然后获取大小。
text-indent: -9999px
请参阅： 使用“text-indent”隐藏文本