基于选中选项调整Canvas中立方体的尺寸

嘿，我帮你把这三个需求都实现啦，下面是完整的代码和详细说明，你可以直接拿去用～

核心实现思路 #

• 给下拉选择框绑定尺寸配置，监听选择变化就触发立方体重绘
• 设定像素与厘米的转换比例（你可以根据实际需求调整），把Canvas绘制的像素尺寸转换成厘米后计算立方米体积
• 动态计算立方体的绘制位置，确保不管尺寸怎么变，都始终在固定的Canvas区域内居中对齐

完整代码实现 #

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sizeSelector">
  <option value="5x5">5x5</option>
  <option value="5x10">5x10</option>
  <option value="10x5">10x5</option>
  <option value="25x15">25x15</option> <!-- 支持最大尺寸 -->
</select>
<p id="volumeDisplay">当前体积：0 立方米</p>
<canvas id="cubeCanvas"></canvas>

CSS #

canvas {
  border: 1px solid #000;
  margin-top: 10px;
}
select {
  display: block;
  padding: 5px;
}
#volumeDisplay {
  margin: 10px 0;
  font-size: 16px;
}

JavaScript #

const canvas = document.getElementById('cubeCanvas');
const ctx = canvas.getContext('2d');
const sizeSelector = document.getElementById('sizeSelector');
const volumeDisplay = document.getElementById('volumeDisplay');

// Canvas固定尺寸
canvas.width = 500;
canvas.height = 300;

// 尺寸映射：键是下拉选项值，值是[宽度(cm), 深度(cm)]
const sizeConfig = {
  '5x5': { width: 5, depth: 5 },
  '5x10': { width: 5, depth: 10 },
  '10x5': { width: 10, depth: 5 },
  '25x15': { width: 25, depth: 15 }
};

// 像素与厘米的转换比例（可自定义，这里设1cm=8px）
const pxPerCm = 8;
// 立方体固定高度（单位：cm）
const fixedHeightCm = 5;

// 绘制立方体的核心函数
function drawCube(widthCm, depthCm) {
  // 清空Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 转换为像素单位
  const widthPx = widthCm * pxPerCm;
  const depthPx = depthCm * pxPerCm;
  const heightPx = fixedHeightCm * pxPerCm;
  
  // 投影偏移比例（保持视觉上的立方体透视效果）
  const offsetRatio = 0.4;
  const offsetX = depthPx * offsetRatio;
  const offsetY = depthPx * offsetRatio;
  
  // 计算居中位置：让立方体在Canvas内水平、垂直居中
  const frontX = (canvas.width - widthPx - offsetX) / 2;
  const frontY = (canvas.height - heightPx + offsetY) / 2;
  const sideX = frontX + offsetX;
  const sideY = frontY - offsetY;
  
  // 绘制正面矩形
  ctx.strokeStyle = 'grey';
  ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
  ctx.beginPath();
  ctx.rect(frontX, frontY, widthPx, heightPx);
  ctx.fill();
  ctx.stroke();
  
  // 绘制侧面矩形
  ctx.beginPath();
  ctx.rect(sideX, sideY, depthPx, heightPx);
  ctx.fill();
  ctx.stroke();
  
  // 绘制连接线条
  ctx.beginPath();
  // 左上角连线
  ctx.moveTo(frontX, frontY);
  ctx.lineTo(sideX, sideY);
  // 右上角连线
  ctx.moveTo(frontX + widthPx, frontY);
  ctx.lineTo(sideX + depthPx, sideY);
  // 左下角连线
  ctx.moveTo(frontX, frontY + heightPx);
  ctx.lineTo(sideX, sideY + heightPx);
  // 右下角连线
  ctx.moveTo(frontX + widthPx, frontY + heightPx);
  ctx.lineTo(sideX + depthPx, sideY + heightPx);
  ctx.stroke();
  
  // 计算并显示体积
  const volume = widthCm * depthCm * fixedHeightCm;
  volumeDisplay.textContent = `当前体积：${volume.toFixed(2)} 立方米`;
}

// 初始化绘制默认尺寸
drawCube(5, 5);

// 监听下拉选择框变化，触发重绘
sizeSelector.addEventListener('change', function() {
  const selectedSize = this.value;
  const { width, depth } = sizeConfig[selectedSize];
  drawCube(width, depth);
});

关键细节说明 #

1. 尺寸控制：通过sizeConfig对象绑定下拉选项和实际厘米尺寸，选择后自动传入绘制函数，动态调整立方体的宽和深（高度固定）
2. 单位转换：用pxPerCm定义像素与厘米的比例，把厘米尺寸转成Canvas的像素单位进行绘制，再用原始厘米尺寸计算体积
3. 居中对齐：每次绘制前都计算正面矩形的起始坐标，确保立方体整体在Canvas区域内居中，不管尺寸怎么变都不会超出边界

内容的提问来源于stack exchange，提问作者Mohammed Wahed Khan