javascript - Canvas 元素中的字母间距

Question

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

我有一个正在向其绘制文本的 Canvas 元素。我想设置类似于 CSS letter-spacing 属性的字母间距。我的意思是在绘制字符串时增加字母之间的像素数量。

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

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"; 但无济于事。有没有一种方法可以通过简单的设置来做到这一点，或者我是否必须制作一个函数来单独绘制每个字符并考虑间距？

Answer 1

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

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 space在每个字母之间。

使用 8201(而不是 8202)将插入稍宽的 thin space

有关更多空白选项，请参阅 this list of Unicode Spaces

与手动定位每个字母相比，此方法可以帮助您更轻松地保持字体的字距调整，但是您无法通过这种方式缩小字母间距。