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 beim Zeichnen von Text an.
Dies entspricht der CSS-Eigenschaft word-spacing.
Wert
Der Wortabstand als Zeichenkette im CSS-Datenformat <length>.
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 parsierbaren Wert gesetzt wird.
Beispiele
In diesem Beispiel zeigen wir den Text "Hello World" dreimal an, wobei die wordSpacing-Eigenschaft verwendet wird, um den Abstand in jedem Fall zu ändern.
Der Abstand wird auch 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 |
Browser-Kompatibilität
Loading…