CanvasRenderingContext2D: letterSpacing 屬性
Canvas API 的 CanvasRenderingContext2D.letterSpacing 屬性指定繪製文字時字母之間的間距。
這對應於 CSS letter-spacing 屬性。
值
字母間距以 CSS <length> 資料格式的字串表示。預設值為 0px。
該屬性可用於獲取或設定間距。如果設定為無效/無法解析的值，屬性值將保持不變。
示例
在此示例中，我們將文字“Hello World”顯示三次，每次都使用 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 (default: ${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);
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-letterspacing |
瀏覽器相容性
載入中…