在 HTML 画布中从中心生成文本，一次打印一个字符，字符串动态调整格式

Question

我正在构建一个网站，每次将一个字符绘制到画布中，我已经成功编写了第一部分的代码，但我现在要做的是使文本在中心生成并调整其绘制每个新字母的位置，使其保持对称。我将此基于 ULTRAKILL 的文本系统，因此如果有人玩过该游戏，他们可能会理解我在说什么，如果没有，这里有一个正是我想要的示例：https://youtu.be/Ox1oMABK2i4？ t=17

这是我到目前为止所写的：

const font = new FontFace('ULTRAKILL', 'url(VCR_OSD.ttf)');
font.load().then((font) => {
    document.fonts.add(font);
});

function genText(interval, startAt) {

    // Get canvas and input text
    let ctx = document.getElementById("canvas").getContext("2d");
    let canvas = document.getElementById("canvas")
    let text = document.getElementById('input').value.split('')

    // Set coordinates and index
    let x = canvas.width / 2
    let y = canvas.height / 2
    let i = 0

    // Clear canvas for every generation
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    setTimeout(() => {

        setInterval(() => {

            if (i < text.length) {
                ctx.font = '30px ULTRAKILL'
                ctx.fillText(text[i], x, y)

                x += 17
                i++
            }

        }, interval);

    }, startAt);


}

作为画布的首次用户，我不知道如何实现这一目标，所以我非常感谢您对我应该做什么的帮助

Answer 1

您可以使用

ctx.measureText(text.slice(0, i).join('')).width

方法。这是为您修改的 JavaScript 代码。

// Load the font
const font = new FontFace('ULTRAKILL', 'url(VCR_OSD.ttf)');
font.load().then((font) => {
    document.fonts.add(font);
});

function genText(interval, startAt) {
    // Get canvas and input text
    let ctx = document.getElementById("canvas").getContext("2d");
    let canvas = document.getElementById("canvas")
    let text = document.getElementById('input').value.split('')

    // Set coordinates and index
    let y = canvas.height / 2
    let i = 0

    // Clear canvas for every generation
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    setTimeout(() => {
        setInterval(() => {
            if (i < text.length) {
                // Calculate the width of the text that has been drawn so far
                let textWidth = ctx.measureText(text.slice(0, i).join('')).width;

                // Adjust the x position based on the text width
                let x = (canvas.width - textWidth) / 2;

                ctx.font = '30px ULTRAKILL'
                ctx.fillText(text[i], x, y)

                i++
            }
        }, interval);
    }, startAt);
}