CanvasRenderingContext2D：letterSpacing 属性

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.

Canvas API 的 CanvasRenderingContext2D.letterSpacing 属性用于指定绘制文本时字母之间的间距。

这对应于 CSS 中的 letter-spacing 属性。

值

letterSpacing 属性的值以 CSS 的 <length> 数据格式的字符串表示。默认值为 0px。

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

示例

在这个示例中，我们三次显示文本“Hello World”，每次使用 letterSpacing 属性来修改字母间距。同时，还显示了每种情况下的间距值。

HTML

html

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

JavaScript

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

ctx.font = "30px serif";

// 默认字母间距
ctx.fillText(`Hello world (默认：${ctx.letterSpacing})`, 10, 40);

// 自定义字母间距：10px
ctx.letterSpacing = "10px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 90);

// 自定义字母间距：20px
ctx.letterSpacing = "20px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 140);

结果

规范

Specification
HTML # dom-context-2d-letterspacing

浏览器兼容性

参见

CanvasRenderingContext2D.wordSpacing