CanvasRenderingContext2D: wordSpacing 屬性
CanvasRenderingContext2D.wordSpacing 屬性（屬於 Canvas API）指定了繪製文字時單詞之間的間距。
這對應於 CSS 的 word-spacing 屬性。
值
該屬性值是一個字串，採用 CSS <length> 資料格式。預設值為 0px。
該屬性可用於獲取或設定間距。如果設定的值無效/無法解析，屬性值將保持不變。
示例
在此示例中，我們將三次顯示文字“Hello World”，每次使用 wordSpacing 屬性修改間距。每次顯示的間距也使用屬性值進行了顯示。
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 word spacing
ctx.fillText(`Hello world (default: ${ctx.wordSpacing})`, 10, 40);
// Custom word spacing: 10px
ctx.wordSpacing = "10px";
ctx.fillText(`Hello world (${ctx.wordSpacing})`, 10, 90);
// Custom word spacing: 30px
ctx.wordSpacing = "30px";
ctx.fillText(`Hello world (${ctx.wordSpacing})`, 10, 140);
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-wordspacing |
瀏覽器相容性
載入中…