Question

我正在使用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);

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

我做了什么： http://imgur.com/nnezVQp

我需要做什么： http://imgur.com/tDWoLRT

感谢您的帮助。

Answer 1

您可以使用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);
}

Answer 2

您已经有了绘制单个三角形的功能。

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

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);

画布 - 将三角形相乘以形成平局

2 个答案: