画布 - 乘以三角形以形成绘图 [英] Canvas - Multiplying triangles to form a draw

问题描述

我正在使用canvas和svg制作项目。我使用4个三角形的画布绘制了一个模式。问题是，我现在需要使那些4个三角形更小，以便在我的屏幕上插入更多。这是我的代码。

I'm making a project using canvas and svg. I've drawn a pattern using canvas with 4 triangles. The problem is, I now need to make those 4 triangles smaller in order to insert more of the on my screen. Here's my code.

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

那么我只需在脚本中调用我的函数：

then I just call my function in the script like so:

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

用我的愿望绘制三角形。现在我需要填补我的屏幕更多的这些。我会发布一些截图。

This draws the triangles with my desire coordenates. Now I need to fill my screen with more of these. I'll post some screenshots.

我所做的：
http：// imgur .com / nnezVQp

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

感谢您的帮助。

推荐答案

您可以使用 canvas.scale（）和 canvas.translate >

You can use canvas.scale() and canvas.translate() to draw scaled down versions of your original design at different positions.

您可能想要使用 canvas.save（）和 canvas.restore（）可以将变换重置为正常。

You will probably want to use canvas.save() and canvas.restore() to reset the transform back to normal afterwards.

您的代码正确，您将需要执行以下操作：

So assuming I understand your code correctly, you will want to do something like:

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

这篇关于画布 - 乘以三角形以形成绘图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！