CanvasRenderingContext2D: свойство wordSpacing

Свойство CanvasRenderingContext2D.wordSpacing API Canvas API определяет интервал между словами при отрисовке текста.

Это соответствует свойству CSS word-spacing.

Значение

Интервал между словами, представленный строкой в формате CSS <length>. По умолчанию значение 0px.

Свойство можно использовать для получения или установки интервала. Значение свойства останется неизменным, если оно будет установлено в недопустимое/неразборчивое значение.

Примеры

В этом примере трижды отображается текст "Hello World", используя свойство wordSpacing для изменения интервала в каждом случае. Интервал также отображается для каждого случая, используя значение свойства.

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);

Результат

Спецификации

Спецификация
HTML # dom-context-2d-wordspacing

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`wordSpacing`	99	99	115	85	Нет	99	115	68	Нет	18.0	99

См. также

CanvasRenderingContext2D.letterSpacing

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/wordSpacing