Canvas

Question

我正在使用 canvas 和 svg 制作一个项目。我使用 canvas 和 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);

这绘制了三角形与我的愿望坐标。现在我需要用更多这些来填充我的屏幕。我会 post 一些截图。

我做了什么： 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);

Canvas - 三角形相乘形成平局

Canvas - Multiplying triangles to form a draw

html

javascript

svg

html5-canvas