javascript - 保持文本动态更新，在 Canvas 中居中

Question

我有以下 Canvas :

<canvas id="myCanvas" width="400" height="400" style="border:0px;">
Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 2 * Math.PI);
ctx.stroke();

我想在 Canvas 的中心写一个乐谱:

var score = 0;score++;
ctx.fillText(score,200,200);

但是这个分数会更新，这个值的位数越多，它就越不居中。

我尝试使用提供的解决方案 here ，但这里的“文本”只是一个名为 score 的 javascript 变量，因此不被视为文本。

这是我尝试解决问题的 fiddle : https://jsfiddle.net/27xfvLhh/

我看到两种可能的方式来获得想要的结果:

1. 有没有办法在我的 Canvas 中直接居中填充文本？
2. 有没有办法计算文本的大小？

谢谢

Answer 1

Is there a way to fill the text directly centered within my canvas?

您可以使用属性 textAlign 进行水平对齐，使用 textBaseline 进行垂直对齐。然后通过例如使用 Canvas 大小的一半来计算中心点:

Is there a way to calculate what will be the size of the text?

ctx.measureText("Text").width 将为您提供使用当前设置字体的文本宽度(以像素为单位)。

var ctx = c.getContext("2d");
ctx.font = "32px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Some Centered Text", ctx.canvas.width>>1, ctx.canvas.height>>1);

// measure text
var width = ctx.measureText("Some Centered Text").width;
ctx.font = "20px sans-serif";
ctx.fillText(width + "px", ctx.canvas.width>>1, 90 + ctx.canvas.height>>1);

#c {border:1px solid}

<canvas id=c width=600 height=300></canvas>