如何使用 fillRect 绘制具有 3 个完全相同面的等距 3D 立方体？

Question

我想创建一个等轴测 3D 立方体带填充矩形其 3 个面具有与下图相同的尺寸：

我有一个代码的开头，但我有两个问题：

• 面的尺寸不尽相同
• 我不知道怎么画顶面

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

// Top Face (not big enough)
ctx.save();
ctx.translate(centerX, centerY);
ctx.scale(1, .5);
ctx.rotate(-45 * Math.PI / 180);
ctx.fillStyle = 'yellow';
ctx.fillRect(0, -faceSize, faceSize, faceSize);
ctx.restore();
  
// Left Face (not high enough)
ctx.save();
ctx.translate(centerX, centerY);
ctx.transform(1, .5, 0, 1, 0, 0);
ctx.fillStyle = 'red';
ctx.fillRect(-faceSize, 0, faceSize, faceSize);
ctx.restore();

// Right Face (not high enough)
ctx.save();
ctx.translate(centerX, centerY);
ctx.transform(1, -.5, 0, 1, 0, 0);
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, faceSize, faceSize);
ctx.restore();

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

Answer 1

如果我们在等距立方体上叠加一个圆，我们可以看到外部顶点的间距相等。事实上它总是 60°，这并不奇怪，因为它是六边形。

所以我们所要做的就是获取外部顶点的坐标。这很容易，因为我们可以做一个进一步的假设：如果你再看一下这个形状，你会注意到立方体每条边的长度似乎就是圆的半径。

借助一点三角函数和一个递增 60 度的 for 循环，我们可以计算并将所有这些顶点放入一个数组中，最后连接这些顶点以绘制立方体。 这是一个例子：

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

function drawCube(x, y, sideLength) {
  let vertices = [new Point(x, y)];
  for (let a = 0; a < 6; a++) {
    vertices.push(new Point(x + Math.cos(((a * 60) - 30) * Math.PI / 180) * sideLength, y + Math.sin(((a * 60) - 30) * Math.PI / 180) * sideLength));
  }
  ctx.fillStyle = "#ffffff";
  ctx.beginPath();
  ctx.moveTo(vertices[0].x, vertices[0].y);
  ctx.lineTo(vertices[5].x, vertices[5].y);
  ctx.lineTo(vertices[6].x, vertices[6].y);
  ctx.lineTo(vertices[1].x, vertices[1].y);
  ctx.lineTo(vertices[0].x, vertices[0].y);
  ctx.fill();

  ctx.fillStyle = "#a0a0a0";
  ctx.beginPath();
  ctx.moveTo(vertices[0].x, vertices[0].y);
  ctx.lineTo(vertices[1].x, vertices[1].y);
  ctx.lineTo(vertices[2].x, vertices[2].y);
  ctx.lineTo(vertices[3].x, vertices[3].y);
  ctx.lineTo(vertices[0].x, vertices[0].y);
  ctx.fill();

  ctx.fillStyle = "#efefef";
  ctx.beginPath();
  ctx.moveTo(vertices[0].x, vertices[0].y);
  ctx.lineTo(vertices[3].x, vertices[3].y);
  ctx.lineTo(vertices[4].x, vertices[4].y);
  ctx.lineTo(vertices[5].x, vertices[5].y);
  ctx.lineTo(vertices[0].x, vertices[0].y);
  ctx.fill();
}

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

drawCube(200, 150, 85);

canvas {
  background: #401fc1;
}

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