如何让Canvas支持用户输入全字母的Journal字体姓名？

不用逐个指定keyID，直接用e.key获取用户输入的字符就行，比硬编码keyCode高效得多。另外还要解决字符重叠的问题，给每个字母分配不同的绘制位置。以下是修改后的完整代码：

<div id="my_painter">
    <canvas id="canvas" tabindex="0"></canvas>
</div>
<script>
    var tempContext = null;
    var currentX = 100; // 记录下一个字符的X坐标，避免重叠
    const baseY = 60; // 固定Y坐标
    const letterSpacing = 15; // 字符间距，可根据字体调整

    window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = canvas.parentNode.clientWidth;
        canvas.height = canvas.parentNode.clientHeight;        
        tempContext = canvas.getContext("2d");
        tempContext.fillStyle = "blue";
        tempContext.font = "20px Journal";
        // 只监听canvas的keypress事件即可，无需监听window
        canvas.addEventListener('keypress', handleKeyPress);
        canvas.focus();       
    }

    function handleKeyPress(e) {
        const inputChar = e.key;
        // 只处理字母（大小写），过滤其他按键
        if (/^[a-zA-Z]$/.test(inputChar)) {
            tempContext.fillText(inputChar, currentX, baseY);
            currentX += letterSpacing; // 更新下一个字符的位置
            e.preventDefault();
        }
    }
</script>

关键修改点说明： #

• 改用keypress事件：这个事件专门用来捕获用户实际输入的字符，能直接拿到带大小写的字母，比keydown更适合文本输入场景。
• 用e.key替代keyCode：不用再记每个字母对应的keyID，直接获取用户输入的字符，逻辑更直观。
• 添加字符位置跟踪：用currentX变量记录下一个字符的绘制位置，每次输入后增加间距，避免所有字母叠在一起。
• 过滤非字母输入：通过正则表达式/^[a-zA-Z]$/只处理字母按键，防止回车、空格等无关按键触发绘制。
• 移除重复事件监听：canvas设置了tabindex="0"并调用focus()后，直接监听canvas的事件就够了，无需再监听window，避免重复触发。

内容的提问来源于stack exchange，提问作者Anjali