javascript - 计算数字空间以近似一行文本

Question

我正在制作歌词+和弦显示，我想采用这种原始格式:

[Dm]Hello darkness my old [C]friend

并将和弦放在歌词上方。我可以通过将每个单词设为 div，并将和弦设置为绝对/相对于该单词来实现此目的，但这意味着人们无法将所有内容复制并粘贴到 Word 等所见即所得编辑器中。

所以我想在歌词上方添加一行并用空格填充，如下所示:

Dm                    C
Hello darkness my old friend

使用等宽文本很容易，但我想使用 Arial/Times 等字体。 有没有办法计算出多少个空格相当于某些文本的长度？

注意 - 在每个人都说“哦，你应该使用不同的方法来显示和弦”之前，我已经尝试了几种方法，但我正在专门寻找可以复制和粘贴而不会丢失和弦位置的东西.

Answer 1

CanvasRenderingContext2D接口(interface)有文本度量方法 measureText可用于获取文本的宽度。

它需要两个参数，要测量的文本和 CSS font值。

流程中使用的 Canvas 元素不必是文档的一部分，也不必仅仅为了使用 measureText 而具有宽度或高度属性。

概念示例:

"use strict";

const ctx = document.createElement("CANVAS").getContext("2d");

function getTextWidth(text, cssFont) {
    ctx.font = cssFont;
    var o = ctx.measureText(text);
    return o.width;
}

var cssFont = "14px Arial";
var spaceWidth = getTextWidth( "          ", cssFont) / 10;
var lyric = "Hello darkness my old "
var lyricWidth = getTextWidth("Hello darkness my old ", cssFont);

console.log('"' + lyric + '"' + " width is " + lyricWidth);
console.log("space width is " + spaceWidth);
console.log("So the lyric width is " + lyricWidth/spaceWidth + " spaces");