Javascript 画布放置问题

我有一个500*250（w*h）的画布，并将此代码应用于它

var cvs = document.getElementById('Dugong');
var ctx = cvs.getContext('2d');
var cvsHeight = cvs.height; // 250
var cvsWidth = cvs.width; // 500

var loadUpFlappy = "Flappy";
var loadUpDugong = "Dugong";

ctx.fillStyle = "#ECA20F";
ctx.fillRect(5, (cvsHeight / 2) + 1, ctx.measureText(loadUpFlappy).width + 10, 2); // across, down, width, height
ctx.fillRect(cvsWidth - (ctx.measureText(loadUpDugong).width + 5), cvsHeight / 2 + 1, ctx.measureText(loadUpDugong).width + 10, 2);

ctx.fillStyle = "#DADFE1";
ctx.font = "40px Century Schoolbook";
ctx.fillText(loadUpFlappy, 10, cvsHeight / 2);
ctx.fillText(loadUpDugong, cvsWidth - (ctx.measureText(loadUpDugong).width + 10), cvsHeight / 2);

据我所知，这个代码应该输出

一条

#ECA20F

线，其高度为

2

，距离画布左边框

5

，位于画布中线下方

1

，宽度为

Flappy

加

10

另一条

#ECA20F

线的高度为

2

，距离右侧画布边框

5

，位于画布中线下方

1

，宽度为

儒艮

加

10

及

>代码> FLAPY <代码>＞DADFE1<代码> > <代码> 10 < /C> >远离画布的“强>左/强>边框，位于画布中间。<李> >代码>儒艮<代码>也在<代码>中，dADEF1 > <代码> 10 远离“强>右/强>边框的画布，也位于画布中间。<李>

---

我的问题是，这些行与文本不匹配（它们应该跨越文本的宽度加上两边的5px）。相反，他们这样做

---

很抱歉，如果这个问题有任何明显的答案，因为我是javascript和画布的“noob”。

编辑：我认为不可能计算文本长度。所以我有点错了

---

---

没有简单的方法来放置行，因为您不知道文本中的字体大小。您可以做的是将文本居中对齐（

ctx.textAlign='center'

），并将其放置在某个点上，该点将成为文本的中心。然后根据文本长度和大小设置线宽。将线始终放在该点的下方，并设置与该点相同的X，用线的宽度除以2减去它。但在这种情况下，行宽并不精确，但它有助于字数更小。

您的评论让我意识到，如果我在测试宽度之前声明字体样式，而不是在测试之后声明字体样式，那么它就会起作用。幸运的是，它做到了！所以我想谢谢你。