CanvasRenderingContext2D: wordSpacing 属性
CanvasRenderingContext2D.wordSpacing 属性（属于 Canvas API）指定了绘制文本时单词之间的间距。
这对应于 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";
// 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 |
浏览器兼容性
加载中…