CanvasRenderingContext2D: wordSpacing-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.wordSpacing-Eigenschaft der Canvas API gibt den Abstand zwischen Wörtern bei der Textdarstellung an.
Dies entspricht der CSS-Eigenschaft word-spacing.
Wert
Der Wortabstand als Zeichenkette im CSS <length>-Datenformat.
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 oder nicht lesbarer Wert gesetzt wird.
Beispiele
In diesem Beispiel wird der Text "Hello World" dreimal angezeigt, wobei die wordSpacing-Eigenschaft verwendet wird, um den Abstand 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 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);
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-context-2d-wordspacing |