JSキャンバス - 特定のテキスト・重量

Question

と計算テキスト幅Iは現在、テキストの幅を計算するには、次のコードを使用しています：

正常に動作しますが、 fontプロパティはそうのようにフォーマットされた文字列にする必要があり

function measureWordSize(word, font) { 
    var canvas = measureWordSize.canvas || (measureWordSize.canvas = document.createElement("canvas")); 
    var context = canvas.getContext("2d"); 
    context.font = font; 
    var metrics = context.measureText(word); 
    return metrics.width; 
} 

：[italic] [bold] <font-size> <font-family>。

テキストの幅を特定のtext-weightで計算し、フォントを700px <font-size> <font-family>に設定しても機能しません。 MDNは数字について何も言わないtext-weight。

数値がtext-weightの要素のテキスト幅を計算するにはどうすればよいですか？

Answer 1

context.fontは、CSS font省略形と同じ形式を受け入れます。 MDN

/*サイズから撮影

_{|ファミリー*/
フォント：2em "Open Sans"、sans-serif;}

/* style |サイズ|ファミリー*/
フォント：italic 2em "Open Sans"、sans-serif;

/* style |バリアント|体重|サイズ/行の高さ|ファミリー*/
フォント：italic small-caps bolder 16px/3筆記体;

/* style |バリアント|体重|ストレッチ|サイズ/行の高さ|ファミリー*/
フォント：イタリックスモールキャップボールドコンデンス16px/3筆記体;

だからあなたもちょうどCSSと同じように、数値尺度としてfont-weightを設定することができます。

const ctx = canvas.getContext('2d'); 
 
const str = "I'm bold"; 
 
// set the font as numeric-font-weight | font-size | font-name 
 
ctx.font = '700 16px sans-serif'; 
 
console.log('bold:', ctx.measureText(str).width); 
 

 
ctx.fillText(str, 0, 20) 
 
// reset to normal font-weight 
 
ctx.font = '400 16px sans-serif'; 
 
console.log('medium:', ctx.measureText(str).width);

<canvas id="canvas"></canvas>