Skip to content

Commit

Permalink
minor improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
yin1999 committed Jul 30, 2024
1 parent f4593ef commit d7f4dcf
Showing 1 changed file with 5 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ l10n:

##

单词间距作为 CSS {{cssxref("length")}} 数据格式的字符串。默认值为 `0px`
单词间距,CSS {{cssxref("length")}} 数据格式的字符串。默认值为 `0px`

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

## 示例

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

### HTML

Expand All @@ -36,15 +36,15 @@ const ctx = canvas.getContext("2d");
ctx.font = "30px serif";

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

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

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

### 结果
Expand Down

0 comments on commit d7f4dcf

Please sign in to comment.