CanvasRenderingContext2D：wordSpacing 属性

CanvasRenderingContext2D.wordSpacing 是 Canvas API 的一个属性，用于指定绘制文本时单词之间的间距。

这对应于 CSS 的 word-spacing 属性。

值

单词间距，以 CSS <length> 数据格式的字符串表示。默认值为 0px。

此属性可用于获取或设置间距。如果设置为无效/无法解析的值，则属性值将保持不变。

示例

在此示例中，我们三次显示文本“Hello World”，使用 wordSpacing 属性修改每个案例的间距。还使用该属性的值显示每个案例的间距。

HTML

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

CanvasRenderingContext2D.letterSpacing