CanvasRenderingContext2D: letterSpacing プロパティ
CanvasRenderingContext2D.letterSpacing
はキャンバス API のプロパティで、テキストを描画する際の字間を指定します。
これは CSS の letter-spacing
プロパティに相当します。
値
文字間隔を CSS <length>
のデータ形式の文字列で指定します。
既定値は 0px
です。
このプロパティを使用して、間隔を取得したり設定したりすることができます。 不正な値や解析不可能な値を設定しても、プロパティ値は変更されません。
例
この例では、"Hello World "というテキストを3回表示し、それぞれの用途で文字間隔を変更するために letterSpacing
プロパティを使用しています。
間隔はプロパティの値を使用して、それぞれの場合ごとに表示されます。
HTML
html
<canvas id="canvas" width="700"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px serif";
// Default letter spacing
ctx.fillText(`Hello world (既定値: ${ctx.letterSpacing})`, 10, 40);
// Custom letter spacing: 10px
ctx.letterSpacing = "10px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 90);
// Custom letter spacing: 20px
ctx.letterSpacing = "20px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 140);
結果
仕様書
Specification |
---|
HTML Standard # dom-context-2d-letterspacing |
ブラウザーの互換性
BCD tables only load in the browser