CanvasRenderingContext2D：letterSpacing 属性

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

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

值

字母间距以 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";

// Default letter spacing
ctx.fillText(`Hello world (default: ${ctx.letterSpacing})`, 10, 40);

// Custom letter spacing: 10px
ctx.letterSpacing = "10px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 90);

// Custom letter spacing: 20px
ctx.letterSpacing = "20px";
ctx.fillText(`Hello world (${ctx.letterSpacing})`, 10, 140);

结果

规范

规范
HTML 标准 # dom-context-2d-letterspacing

浏览器兼容性

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

另请参阅

CanvasRenderingContext2D.wordSpacing