CanvasRenderingContext2D:wordSpacing 属性

Canvas APICanvasRenderingContext2D.wordSpacing 属性用于指定绘制文本时单词之间的间距。

该属性对应于 CSS 中的 word-spacing 属性。

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

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

示例

在以下示例中,我们显示三段“Hello World”文本,并通过 wordSpacing 属性来修改每种情况的间距。还使用属性值显示了每种情况的间距值。

HTML

html
<canvas id="canvas" width="700"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px serif";

// 默认单词间距
ctx.fillText(`Hello world(默认:${ctx.wordSpacing}`, 10, 40);

// 自定义单词间距:10px
ctx.wordSpacing = "10px";
ctx.fillText(`Hello world(${ctx.wordSpacing}`, 10, 90);

// 自定义单词间距:30px
ctx.wordSpacing = "30px";
ctx.fillText(`Hello world(${ctx.wordSpacing}`, 10, 140);

结果

规范

Specification
HTML
# dom-context-2d-wordspacing

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
wordSpacing

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

参见