如何用fillRect绘制三个面尺寸完全一致的等轴测3D立方体

以下是修正后的代码，解决了尺寸不一致和顶面绘制的问题，完全符合你的需求：

HTML #

<canvas width="400" height="400"></canvas>

JavaScript #

const faceSize = 150;
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// 等轴测投影核心参数，保证各面尺寸统一
const isoScale = Math.sqrt(3) / 2;
const shearFactor = 0.5;

// 绘制左面（红色）
ctx.save();
ctx.translate(centerX, centerY);
// 等轴测变换矩阵：X轴缩放+切变，Y轴反向缩放+切变
ctx.transform(isoScale, shearFactor * isoScale, -isoScale, shearFactor * isoScale, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(-faceSize, 0, faceSize, faceSize);
ctx.restore();

// 绘制右面（蓝色）
ctx.save();
ctx.translate(centerX, centerY);
ctx.transform(isoScale, -shearFactor * isoScale, isoScale, shearFactor * isoScale, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, faceSize, faceSize);
ctx.restore();

// 绘制顶面（黄色）
ctx.save();
ctx.translate(centerX, centerY);
// 顶面的等轴测变换：缩放后旋转90度，保证位置与侧面衔接
ctx.transform(isoScale, 0, 0, isoScale * Math.sqrt(3) / 2, 0, 0);
ctx.rotate(-Math.PI / 2);
ctx.fillStyle = 'yellow';
ctx.fillRect(0, -faceSize, faceSize, faceSize);
ctx.restore();

关键调整说明 #

• 统一尺寸解决：原代码的变换缺少等轴测标准缩放系数，导致各面实际显示尺寸不一致。使用Math.sqrt(3)/2作为基础缩放比例，配合切变因子，确保每个面的边长严格等于faceSize。
• 顶面绘制逻辑：通过先缩放再旋转90度的变换组合，让顶面在等轴测视角下完美贴合立方体顶部，位置和尺寸与左右面完全匹配。
• 后续图像绘制适配：每个面的变换流程独立且标准，后续要在面上绘制图像时，只需在对应的save()和restore()之间替换fillRect为drawImage即可，变换逻辑完全复用。

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