CanvasRenderingContext2D: letterSpacing 属性
Canvas API 的 CanvasRenderingContext2D.letterSpacing 属性指定绘制文本时字母之间的间距。
这对应于 CSS letter-spacing 属性。
值
字母间距以 CSS <length> 数据格式的字符串表示。默认值为 0px。
该属性可用于获取或设置间距。如果设置为无效/无法解析的值，属性值将保持不变。
示例
在此示例中，我们将文本“Hello World”显示三次，每次都使用 letterSpacing 属性修改字母间距。每次都会显示间距，使用属性值。
HTML
html
<canvas id="canvas" width="700"></canvas>
JavaScript
js
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 |
浏览器兼容性
加载中…