如何通过表单输入修改Canvas尺寸？现有代码无效果求助

你的代码里有几个关键问题导致点击按钮后Canvas尺寸没变化，下面逐一说明并给出修复方案：

问题分析 #

1. 未获取输入框的实际值：userInputWidth和userInputHeight是DOM元素对象，不是输入框里的数值，直接拼接px会得到类似[object HTMLInputElement]px的无效样式值。
2. 表单提交阻止逻辑错误：你给submit按钮绑定了submit事件，但submit事件是属于<form>元素的，按钮本身没有这个事件，导致页面还是会刷新，无法执行尺寸修改逻辑。
3. Canvas尺寸设置不完整：仅修改CSS的width和height会导致Canvas的绘图区域和显示区域不一致，需要同时设置Canvas元素自身的width和height属性。

修复后的代码 #

HTML（仅给表单添加ID，其余保持原结构） #

<div id="app">
    <form id="canvasForm">
        <label for="enterWidthInput">Width:</label><br>
        <input type="number" id="enterWidthInput" name="widthInput"><br>

        <label for="enterHeightInput">Height:</label><br>
        <input type="number" id="enterHeightInput" name="heightInput"><br>

        <input type="submit" id="submitButton" value="Submit">
    </form>
</div>

<canvas id="myCanvas"></canvas>

CSS（保持原样式不变） #

#app canvas {
    margin: auto;
}

#myCanvas {
    width: 500px;
    height: 300px;
    background-color: aqua;
}

JavaScript（统一用原生JS，修正核心逻辑） #

const canvasElement = document.getElementById("myCanvas");
const userInputHeight = document.getElementById("enterHeightInput");
const userInputWidth = document.getElementById("enterWidthInput");
const canvasForm = document.getElementById("canvasForm");

function changeCanvas() {
    // 获取输入框数值，设置默认值避免空值/非数字出错
    const width = parseInt(userInputWidth.value) || 500;
    const height = parseInt(userInputHeight.value) || 300;

    // 同时设置Canvas绘图尺寸和显示尺寸，避免图形拉伸
    canvasElement.width = width;
    canvasElement.height = height;
    canvasElement.style.width = `${width}px`;
    canvasElement.style.height = `${height}px`;
}

// 监听表单提交事件，阻止页面刷新并执行尺寸修改
canvasForm.addEventListener('submit', function(e) {
    e.preventDefault();
    changeCanvas();
});

额外说明 #

• 加入parseInt转换输入值并设置默认值，避免用户输入非数字或空值时出现异常。
• 同时设置Canvas的属性尺寸和CSS样式尺寸，保证绘图区域和显示区域匹配，不会出现图形拉伸变形的情况。
• 移除了jQuery代码，统一使用原生JS，减少依赖且逻辑更清晰。

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