我正在構建一個 2D 自上而下的回合制足球游戲。每次您單擊球隊的一名球員時，都會在側面畫布上繪制一張卡片。我剛剛開始撰寫此類卡片的代碼，作為初步操作，它只是繪制模板，所選玩家的名字水平居中：
drawPlayerCard = (card, player) => {
let ctx = this.leftUserContext;
ctx.drawImage(card.template, card.position.x, card.position.y);
const nameWidth = ctx.measureText(player.name).width;
ctx.font = "12px fff";
ctx.fillText(player.name, ((card.template.width - nameWidth) / 2) card.position.x, (202 card.position.y));
}
該字體是我通過CSS下載并使用的免費字體
@font-face {
font-family: fff;
src: url(../font/fff-forward.regular.ttf);
}
body {
font-family: fff;
margin: 0;
background-color: white;
}
以及我在這里找到的一個舊的 HTML 技巧，用于預加載字體：
<div id="TableSoccer">
<canvas class="board" id="Field" width="1488" height="1008"></canvas>
<canvas class="board" id="Players" width="1488" height="1008"></canvas>
<canvas class="board" id="MouseEvents" width="1488" height="1008"></canvas>
<canvas class="user left" id="LeftUser" width="200" height="1008"></canvas>
<canvas class="user right" id="RightUser" width="200" height="1008"></canvas>
</div>
<div style="font-family:'fff'"> </div> <!-- font preload -->
但是，當我第一次單擊播放器時，卡片上的名稱使用默認字體大小而不是自定義字體大小居中，仍然正確加載并顯示：
這是第一次點擊加載自定義字體的結果：
這是加載自定義字體后進一步點擊的結果：
這是第一次點擊默認字體的結果。我注釋掉了該ctx.font = "12px fff"行并且生成的文本完全居中，因此我對用于第一個度量的默認字體大小的假設是正確的：
我認為這與字體的異步加載有關，但我不明白為什么，因為字體實際上已加載并顯示。
我錯過了什么？
uj5u.com熱心網友回復：
您缺少的是操作的順序問題。
如果你這樣做：
const nameWidth = ctx.measureText(player.name).width;
ctx.font = "12px fff";
您在測量文本后將背景關系設定為不同的字體。因此它將回傳背景關系先前設定的任何字體的寬度或使用默認值。在隨后呼叫該drawPlayerCard()方法時，背景關系的字體將被設定為'fff'并因此回傳正確的寬度。
所以只需將上面的內容更改為：
ctx.font = "12px fff";
const nameWidth = ctx.measureText(player.name).width;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/489927.html
標籤：javascript 字体 html5-画布