如何在画布上构建多段三角形？

Question

我使用画布和脚本创建了一个带有小三角形的三角形，并包含以下信息：

• 100厘米的等边三角形。

• 每个三角形里面都是5厘米的三角形。

• 5厘米的内部三角形有25个三角形。

我无法像第一个演示那样完成第二个示例中的所有迷你三角形，其中绘制了所有三角形。

我使用聊天 GPT 并得到所有相同的答案。

第一个代码和演示：

    function drawEquilateralTriangle(ctx, x, y, size, color) {
        const height = Math.sqrt(3) * size / 2;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + size / 2, y + height);
        ctx.lineTo(x - size / 2, y + height);
        ctx.closePath();
        ctx.strokeStyle = color;
        ctx.stroke();
    }

    function drawSmallTriangles(ctx, x, y, size) {
        const smallSize = 50;
        const smallHeight = Math.sqrt(3) * smallSize / 2;
        const rows = Math.floor(size / smallSize);

        for (let row = 0; row < rows; row++) {
            for (let col = 0; col <= row; col++) {
                const offsetX = (col - row / 2) * smallSize;
                const offsetY = row * smallHeight;
                drawEquilateralTriangle(ctx, x + offsetX, y + offsetY, smallSize, 'red');
                drawMiniTriangles(ctx, x + offsetX, y + offsetY, smallSize);
            }
        }
    }

    function drawMiniTriangles(ctx, x, y, size) {
        const miniSize = size / 5;
        const miniHeight = Math.sqrt(3) * miniSize / 2;

        for (let row = 0; row < 5; row++) {
            for (let col = 0; col <= row; col++) {
                const offsetX = (col - row / 2) * miniSize;
                const offsetY = row * miniHeight;
                drawEquilateralTriangle(ctx, x + offsetX, y + offsetY, miniSize, 'pink');
            }
        }
    }

    window.onload = function() {
        const canvas = document.getElementById('triangleCanvas');
        const ctx = canvas.getContext('2d');

        const triangleSize = 1000; // 100 cm = 1000 px (assuming 1 cm = 10 px)

        // Center of the canvas
        const centerX = canvas.width / 2;
        const startY = 50; // Start 50 pixels from the top to fit in the canvas

        // Draw the large triangle
        drawEquilateralTriangle(ctx, centerX, startY, triangleSize, 'black');

        // Draw the small triangles inside the large triangle
        drawSmallTriangles(ctx, centerX, startY, triangleSize);
    }

第二个代码和演示

    function drawEquilateralTriangle(ctx, x, y, size, color) {
        const height = Math.sqrt(3) * size / 2;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + size / 2, y + height);
        ctx.lineTo(x - size / 2, y + height);
        ctx.closePath();
        ctx.strokeStyle = color;
        ctx.stroke();
    }

    function drawSmallTriangles(ctx, x, y, size) {
        const smallSize = 50;
        const smallHeight = Math.sqrt(3) * smallSize / 2;
        const rows = Math.floor(size / smallSize);

        for (let row = 0; row < rows; row++) {
            for (let col = 0; col <= row; col++) {
                const offsetX = (col - row / 2) * smallSize;
                const offsetY = row * smallHeight;
                drawEquilateralTriangle(ctx, x + offsetX, y + offsetY, smallSize, 'red');
                drawMiniTriangles(ctx, x + offsetX, y + offsetY, smallSize);
            }
        }
    }

    function drawMiniTriangles(ctx, x, y, size) {
        const miniSize = size / 5;
        const miniHeight = Math.sqrt(3) * miniSize / 2;

        for (let row = 0; row < 5; row++) {
            for (let col = 0; col <= row; col++) {
                const offsetX = (col - row / 2) * miniSize;
                const offsetY = row * miniHeight;
                drawEquilateralTriangle(ctx, x + offsetX, y + offsetY, miniSize, 'pink');
            }
        }
    }

    window.onload = function() {
        const canvas = document.getElementById('triangleCanvas');
        const ctx = canvas.getContext('2d');

        const triangleSize = 1000; // 100 cm = 1000 px (assuming 1 cm = 10 px)

        // Center of the canvas
        const centerX = canvas.width / 2;
        const startY = 50; // Start 50 pixels from the top to fit in the canvas

        // Draw the large triangle
        drawEquilateralTriangle(ctx, centerX, startY, triangleSize, 'black');

        // Draw the small triangles inside the large triangle
        drawSmallTriangles(ctx, centerX, startY, triangleSize);
    }

Answer 1

drawMiniTriangles();

在加载事件上被调用，这似乎没有必要，因为

drawSmallTriangles()

已经运行了它，所以它被删除了。

drawMiniTriangles();

看起来无效，所以改变了：

  const miniSize = size / 2;
  const rows = Math.floor(miniSize / 5);
  for (let row = 0; row < rows; row++) {...

我还添加并更改了一个参数到

drawSmallTriangles()

：

function drawSmallTriangles(ctx, x, y, size, ss) {
  const smallSize = ss;

smallSize

被硬编码为 50，与渲染的三角形数量成反比：

const rows = Math.floor(size / smallSize);

下例中为

smallSize

指定的值为 8，而不是 50。

function drawEquilateralTriangle(ctx, x, y, size, color) {
  const height = Math.sqrt(3) * size / 2;
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + size / 2, y + height);
  ctx.lineTo(x - size / 2, y + height);
  ctx.closePath();
  ctx.strokeStyle = color;
  ctx.stroke();
}

function drawSmallTriangles(ctx, x, y, size, ss) {
  const smallSize = ss;
  const smallHeight = Math.sqrt(3) * smallSize / 2;
  const rows = Math.floor(size / smallSize);

  for (let row = 0; row < rows; row++) {
    for (let col = 0; col <= row; col++) {
      const offsetX = (col - row / 2) * smallSize;
      const offsetY = row * smallHeight;
      drawEquilateralTriangle(ctx, x + offsetX, y + offsetY, smallSize, 'red');
      drawMiniTriangles(ctx, x + offsetX, y + offsetY, smallSize);
    }
  }
}

function drawMiniTriangles(ctx, x, y, size) {
  const miniSize = size / 2;
  const miniHeight = Math.sqrt(3) * miniSize / 2;
  const rows = Math.floor(miniSize / 5);

  for (let row = 0; row < rows; row++) {
    for (let col = 0; col <= row; col++) {
      const offsetX = (col - row / 2) * miniSize;
      const offsetY = row * miniHeight;
      drawEquilateralTriangle(ctx, x + offsetX, y + offsetY, miniSize, 'pink');
    }
  }
}

window.onload = function() {
  const canvas = document.getElementById('triangleCanvas');
  const ctx = canvas.getContext('2d');

  const triangleSize = 1000;

  const centerX = canvas.width / 2;
  const startY = 50;

  drawSmallTriangles(ctx, centerX, startY, triangleSize, 8);

}

#triangleCanvas {
  border: 1px solid black;
  display: block;
  margin: auto;
  background-color: white;
}

<canvas id="triangleCanvas" width="1000" height="1000"></canvas>