Question

我有以下画布：

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

我想在画布的中心写一个分数：

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

然而，这个分数将会更新，这个数字越多，它的中心就越少。

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

这是一个小提琴，我在那里试图解决我的问题： https://jsfiddle.net/27xfvLhh/

我看到了获得所需结果的两种可能方式：

有没有办法在我的画布中直接填充文本？
有没有办法计算文字的大小？

由于

Answer 1

有没有办法直接在画布中居中填充文字？

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

有没有办法计算文本的大小？

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

＆＃13;

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

＆＃13;

#c {border:1px solid}

＆＃13;

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

＆＃13;

保持文本，动态更新，在画布中居中

1 个答案: