Canvas中按Backspace键输入字符而非删除内容的问题求助

问题出在你的代码直接将所有按键的e.key绘制到Canvas，没有区分Backspace这类控制键，也没有维护输入内容的状态，导致按Backspace时直接画出了该字符而非删除已输入内容。

解决方案核心思路 #

1. 维护一个存储输入内容的变量（推荐用数组，方便回退操作）
2. 区分按键类型：
   • 普通可打印字符：添加到输入内容中
   • Backspace键：删除输入内容的最后一个字符
3. 每次按键后清空Canvas，重新绘制完整的输入内容，而非追加绘制

修改后的完整代码 #

HTML部分

<div id="my_painter">
    <canvas id="canvas" tabindex="0"></canvas>
</div>

JavaScript部分

<script>
    var tempContext = null;
    var x = 100;
    // 存储输入的字符数组，用于回退操作
    var inputText = [];
    // 字符基准Y坐标
    const baseY = 60;
    // 字体样式（统一定义，方便复用）
    const fontStyle = "20px Journal";

    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 = fontStyle;

        canvas.focus();
        window.addEventListener('keydown', doKeyDown, true);
    }

    function doKeyDown(e) {
        // 阻止默认行为，避免浏览器的默认按键操作
        e.preventDefault();

        switch(e.key) {
            case 'Backspace':
                // 仅当有内容时才执行删除
                if(inputText.length > 0) {
                    const deletedChar = inputText.pop();
                    // 回退x坐标，减去被删除字符的宽度
                    x -= tempContext.measureText(deletedChar).width;
                }
                break;
            default:
                // 仅处理可打印字符（排除回车、制表符等控制键）
                if(e.key.length === 1) {
                    inputText.push(e.key);
                    // 前进x坐标，加上当前字符的宽度
                    x += tempContext.measureText(e.key).width;
                }
        }

        // 清空Canvas
        tempContext.clearRect(0, 0, tempContext.canvas.width, tempContext.canvas.height);
        // 重新绘制所有输入内容
        let currentX = 100;
        inputText.forEach(char => {
            tempContext.fillText(char, currentX, baseY);
            currentX += tempContext.measureText(char).width;
        });
    }
</script>

关键改进点说明 #

• 输入状态维护：用inputText数组存储每个输入的字符，Backspace时直接删除数组最后一个元素，逻辑清晰
• 精准坐标计算：使用measureText()获取字符的实际宽度，替代固定的9像素，适配不同字体和字符的宽度差异
• 清空重绘机制：每次操作后清空Canvas再重新绘制全部内容，确保删除操作能正确反映到画布上
• 控制键过滤：仅处理长度为1的可打印字符，避免回车、制表符等控制键被误绘制

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