CanvasRenderingContext2D: letterSpacing-Eigenschaft
Baseline
2025
Newly available
Since March 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die CanvasRenderingContext2D.letterSpacing-Eigenschaft der Canvas API gibt den Abstand zwischen Buchstaben beim Zeichnen von Text an.
Dies entspricht der CSS-Eigenschaft letter-spacing.
Wert
Der Buchstabenabstand als String im CSS <length> Datenformat. Der Standardwert ist 0px.
Die Eigenschaft kann verwendet werden, um den Abstand zu erhalten oder zu setzen. Der Eigenschaftswert bleibt unverändert, wenn er auf einen ungültigen/nicht analysierbaren Wert gesetzt wird.
Beispiele
In diesem Beispiel wird der Text "Hello World" dreimal angezeigt, wobei die letterSpacing-Eigenschaft verwendet wird, um den Buchstabenabstand in jedem Fall zu ändern. Der Abstand wird für jeden Fall angezeigt, indem der Wert der Eigenschaft verwendet wird.
HTML
<canvas id="canvas" width="700"></canvas>
JavaScript
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);
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-context-2d-letterspacing |
Browser-Kompatibilität
Loading…