[javascript]canvas 元素中的字母间距

· 收录于 2024-01-06 16:57:08 · source URL

问题详情

这个问题几乎说明了一切。我一直在四处寻找，开始担心这是不可能的。

我有这个画布元素，我要在其中绘制文本。我想设置类似于 CSS 字母间距属性的字母间距。我的意思是在绘制字符串时增加字母之间的像素数量。

我绘制文本的代码是这样的，ctx 是画布上下文变量。

ctx.font = "3em sheepsans";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillText("Blah blah text", 1024 / 2, 768 / 2);

我尝试在绘图之前添加ctx.letterSpacing = 2px;但无济于事。有没有办法通过简单的设置来做到这一点，或者我是否必须制作一个函数来单独绘制每个字符，并考虑到间距？

最佳回答

您无法设置字母间距属性，但可以通过在字符串中的每个字母之间插入各种空格之一来在画布中实现更宽的字母间距。例如

ctx.font = "3em sheepsans";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillStyle = "rgb(255, 255, 255)";
var ctext = "Blah blah text".split("").join(String.fromCharCode(8202))
ctx.fillText(ctext, 1024 / 2, 768 / 2);

这将在每个字母之间插入一个 hair 空格。

使用 8201（而不是 8202）将插入稍宽的 thin 空格

有关更多空格选项，请参阅 此 Unicode 空格列表

与手动定位每个字母相比，此方法将帮助您更轻松地保留字体的字距调整，但是您将无法以这种方式收紧字母间距。