画布-将三角形相乘以形成绘图

Canvas - Multiplying triangles to form a draw

本文关键字：绘图 三角形 画布      更新时间：2023-09-26

我正在使用canvas和svg制作一个项目。我用画布画了一个有4个三角形的图案。问题是，我现在需要缩小这4个三角形，以便在屏幕上插入更多的。这是我的密码。

function telaGeraTriangulo(corFundo,corLinha, x0,y0,x1,y1,x2,y2){
        pintor.fillStyle=corFundo;
        pintor.strokeStyle=corLinha;
        pintor.beginPath();
        pintor.moveTo(x0,y0);
        pintor.lineTo(x1,y1);
        pintor.lineTo(x2,y2);
        pintor.closePath();
        pintor.stroke();
        pintor.fill();
     }

然后我就这样调用脚本中的函数：

    telaGeraTriangulo("#449779","#449779", 250,250,0,0,0,500);
    telaGeraTriangulo("#E6B569","#E6B569", 250,250,0,0,500,0);
    telaGeraTriangulo("#AA8D49","#AA8D49", 250,250,501,0,500,500);
    telaGeraTriangulo("#013D55","#013D55", 250,250,0,500,500,500);

这与我的欲望画出了三角形。现在我需要用更多的这些来填充我的屏幕。我会发布一些截图。

我所做的：https://i.stack.imgur.com/SThYW.jpg

我需要做的事情：https://i.stack.imgur.com/Q07in.jpg

谢谢你的帮助。

您可以使用canvas.scale()和canvas.translate()在不同位置绘制原始设计的缩小版本。

之后，您可能希望使用canvas.save()和canvas.restore()将变换重置为正常。

因此，假设我正确理解您的代码，您将希望执行以下操作：

function drawHalfSizeGrid()
{
  pintor.scale(0.5, 0.5);
  for (var j=0; j<5; j++) {
    for (var i=0; i<5; i++) {
      pintor.save();
      pintor.translate(i*250, j*250);
      drawSquare();
      pintor.restore();
    }
  }
}
function drawSquare() {
  telaGeraTriangulo("#449779","#449779", 250,250,0,0,0,500);
  telaGeraTriangulo("#E6B569","#E6B569", 250,250,0,0,500,0);
  telaGeraTriangulo("#AA8D49","#AA8D49", 250,250,501,0,500,500);
  telaGeraTriangulo("#013D55","#013D55", 250,250,0,500,500,500);
}

您已经有了绘制单个三角形的函数。

创建一个函数来绘制一个三角形的正方形。

function drawSquare(x, y, size) {
    var centerX = x + size / 2;
    var centerY = y + size / 2;
    var farX = x + size;
    var farY = y + size;
    telaGeraTriangulo("#449779", "#449779", centerX, centerY, x, y, x, farY);
    telaGeraTriangulo("#E6B569", "#E6B569", centerX, centerY, x, y, farX, y);
    telaGeraTriangulo("#AA8D49", "#AA8D49", centerX, centerY, farX, y, farX, farY);
    telaGeraTriangulo("#013D55", "#013D55", centerX, centerY, x, farY, farX, farY);
}

创建一个函数来绘制多个正方形。

function drawMultipleSquares(x, y, size, horizontalCount, verticalCount) {
    for (var i = 0; i < horizontalCount; i++) {
        for (var j = 0; j < verticalCount; j++) {
            drawSquare(x + i * size, y + j * size, size);
        }
    }
}

调用具有所需位置、大小和方块数的函数。

drawMultipleSquares(0, 0, 100, 4, 4);
相关文章：