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-Datenformat <length>.
Der Standardwert ist 0px.
Die Eigenschaft kann verwendet werden, um den Abstand zu erhalten oder festzulegen. Der Eigenschaftswert bleibt unverändert, wenn ein ungültiger/nicht analysierbarer Wert festgelegt wird.
Beispiele
In diesem Beispiel zeigen wir den Text "Hello World" dreimal an und verwenden die Eigenschaft letterSpacing, um den Buchstabenabstand in jedem Fall zu ändern. Der Abstand wird in jedem Fall unter Verwendung des Wertes der Eigenschaft angezeigt.
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…