Canvas Placement Issue

Question

我有一個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); 

據我所知，這段代碼應該輸出;其具有2高度

1. 一個#ECA20F線，是5從左畫布邊界遠，是1畫布中間線下方，並具有的Flappy加10寬度。
2. 另一個#ECA20F線，其具有的2的高度，是5遠離右畫布邊界，是1畫布中間線下方，並具有的Dugong加10寬度。

和

1. 在#DADFE1字Flappy這是10從遠離開畫布邊界，是在中間的畫布。
2. 字Dugong也在#DADFE1這是10遠離右畫布的邊界，也是在畫布的中間。

---

我的問題是，該線不與文本匹配了（他們應該跨越兩邊的文字加5像素的寬度）。相反，他們這樣做;

• View Image

如果對不起有任何昭然若揭回答這個問題，因爲我是一個「菜鳥」，當涉及到JavaScript和畫布。

Answer 1

編輯：我認爲這是不可能的文本長度。所以我有點不對。

---

沒有簡單的方法放置線條，因爲您不知道文本中的字體大小。你可以做的是將文本對齊中心（ctx.textAlign = 'center'），並將它放在一個以它爲中心的特定點上。然後根據文本的長度和大小設置線寬。把這條線始終放在這個點的下面，並將這個點設置爲相同的X，用你得到的線的寬度除以2來減去它。但是在這種情況下線寬並不精確，但是它有助於縮小單詞。