Canvas尺寸设置与宽高比保持异常问题求助

问题根源 #

你的核心问题是updateCanvasSize函数中的错误缩放逻辑——它没有直接使用输入框的宽高值设置Canvas的像素尺寸，而是强制将最大边对齐到输入宽高中的最大值，再按比例缩放另一条边，这违背了“仅修改Canvas尺寸为输入值”的需求。此外，如果Canvas的CSS显示尺寸与像素尺寸不一致，也会导致视觉拉伸。

修正方案 #

1. 移除多余的缩放计算，直接将输入宽高赋值给Canvas的width和height属性（这两个属性控制Canvas的像素画布尺寸）。
2. 确保CSS中不对Canvas强制设置固定宽高，让显示尺寸自动跟随像素尺寸，避免拉伸。

修正后的完整代码 #

JavaScript

const canvas = document.getElementById("canvas");
const widthInput = document.getElementById("widthInput");
const heightInput = document.getElementById("heightInput");
const rotateCanvasBtn = document.getElementById('rotateCanvasBtn');

function updateCanvasSize() {
  // 解析输入值，添加默认值防止非法输入
  const width = parseInt(widthInput.value) || 530;
  const height = parseInt(heightInput.value) || 310;
  
  // 直接设置Canvas的像素尺寸，无需额外缩放
  canvas.width = width;
  canvas.height = height;
}

widthInput.addEventListener("input", updateCanvasSize);
heightInput.addEventListener("input", updateCanvasSize);

rotateCanvasBtn.addEventListener('click', function(){
  // 交换输入框值并更新Canvas尺寸
  [widthInput.value, heightInput.value] = [heightInput.value, widthInput.value];
  updateCanvasSize();
});

CSS

body {
  text-align: center;
}

canvas {
  border: 1px solid black;
  margin: 20px auto;
  width: auto;
  height: auto; /* 确保显示尺寸匹配像素尺寸，避免拉伸 */
}

div {
  margin-bottom: 10px;
}

label {
  font-weight: bold;
}

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<canvas id="canvas" width="530" height="310"></canvas>
<div>
  <label for="widthInput">Width:</label>
  <input type="number" id="widthInput" value="530">

  <label for="heightInput">Height:</label>
  <input type="number" id="heightInput" value="310">
  <button class="btn-square">
    <i id="rotateCanvasBtn" class="fas fa-rotate"></i>
  </button>
</div>

说明 #

• 修正后的updateCanvasSize函数直接使用输入框的数值设置Canvas像素尺寸，完全符合你“修改Canvas尺寸”的需求。
• CSS中的width: auto; height: auto;确保Canvas在页面上的显示尺寸与像素画布尺寸一致，不会出现拉伸或压缩的视觉异常。
• 交换宽高的逻辑通过解构赋值简化，更简洁直观。

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