绘制许多圆形以形成更大的形状

Question

我正在使用canvas和svg创建一个项目。我使用4个圆圈的画布绘制了一个图案，每4个圆圈中有一个内圆。问题是，我现在需要将这4个圆圈和内圈缩小，以便在我的屏幕上插入更多，最多30个圆圈。这是我的代码。

function telaCirculos(x,y,r,angIn,angFim,corFundo,corLinha){
    pintor.fillStyle=corFundo;
    pintor.strokeStyle=corLinha;
    pintor.beginPath();
    pintor.arc(x,y,r,angIn,angFim);
    pintor.closePath();
    pintor.stroke(); pintor.fill();
}

然后我就像在脚本中调用我的函数一样：

telaCirculos(250,500,250,Math.PI,-2*Math.PI,"#449779","#449779");
telaCirculos(250,500,200,Math.PI,-2*Math.PI,"#013D55","#013D55");
telaCirculos(500,250,250,Math.PI/2,3*Math.PI/2,"#E6B569","#E6B569");
telaCirculos(500,250,200,Math.PI/2,3*Math.PI/2,"#AA8D49","#AA8D49");
telaCirculos(0,250,250,Math.PI/2,-3*Math.PI/2,"#E6B569","#E6B569");
telaCirculos(0,250,200,Math.PI/2,-3*Math.PI/2,"#AA8D49","#AA8D49");
telaCirculos(250,0,250,0,-Math.PI,"#449779","#449779");
telaCirculos(250,0,200,0,-Math.PI,"#013D55","#013D55"); 

这会使用我想要的坐标绘制圆圈。现在我需要用更多这些填充我的屏幕。我会发布一些截图。

我做了什么：

我需要做什么：

Answer 1

这里最好的方法是从你的圆圈中创建一个图案，然后用这个图案填充你的主画布。

为此，请创建一个临时画布，在其上绘制图案，然后从中创建pattern。

document.body.style.margin = 0;
var cv = document.getElementById('cv');
var mainContext = cv.getContext('2d');

var canvasWidth;
var canvasHeight;

function update() {
  canvasWidth = cv.width = window.innerWidth;
  canvasHeight = cv.height = window.innerHeight;
  drawCircles();
}

update();

window.onresize = update;

function drawCircles() {
  mainContext.save();
  // full screen rect
  mainContext.rect(0, 0,
    mainContext.canvas.width, mainContext.canvas.height);
  // scale to put more circles inside ( :-) )
  mainContext.scale(1 / 10, 1 / 10);
  mainContext.fillStyle = buildPattern();
  mainContext.fill();
  mainContext.restore();
}

function buildPattern() {
  var tempCv = document.createElement('canvas');
  tempCv.width = 500;
  tempCv.height = 500;
  var pintor = tempCv.getContext('2d');

  telaCirculos(250, 500, 250, Math.PI, -2 * Math.PI, "#449779", "#449779");
  telaCirculos(250, 500, 200, Math.PI, -2 * Math.PI, "#013D55", "#013D55");
  telaCirculos(500, 250, 250, Math.PI / 2, 3 * Math.PI / 2, "#E6B569", "#E6B569");
  telaCirculos(500, 250, 200, Math.PI / 2, 3 * Math.PI / 2, "#AA8D49", "#AA8D49");
  telaCirculos(0, 250, 250, Math.PI / 2, -3 * Math.PI / 2, "#E6B569", "#E6B569");
  telaCirculos(0, 250, 200, Math.PI / 2, -3 * Math.PI / 2, "#AA8D49", "#AA8D49");
  telaCirculos(250, 0, 250, 0, -Math.PI, "#449779", "#449779");
  telaCirculos(250, 0, 200, 0, -Math.PI, "#013D55", "#013D55");

  var pattern = pintor.createPattern(tempCv, 'repeat');

  return pattern;

  function telaCirculos(x, y, r, angIn, angFim, corFundo, corLinha) {
    pintor.fillStyle = corFundo;
    pintor.strokeStyle = corLinha;
    pintor.beginPath();
    pintor.arc(x, y, r, angIn, angFim);
    pintor.closePath();
    pintor.stroke();
    pintor.fill();
  }

}

<canvas id='cv'></canvas>

Answer 2

GameAlchemist解决方案的替代方案是将模式视为圆的行和列。您可以使用嵌套循环绘制圆的行和列。每行与前一行部分重叠半圈。每隔一行偏移在水平方向上偏移半个圆。由于行重叠，每行覆盖半径的垂直距离。要计算行数，您基本上将高度除以半径。由于列不重叠，每列覆盖2 *半径的水平距离。要计算列数，您基本上将宽度除以半径。由于第一个圆可以是正在绘制的区域的一半，因此实际上必须分别在半径和半径之间添加半径，然后再分别为2 *半径和半径。您可以使用数组来保存颜色和偏移量。然后用圆圈填充矩形区域的功能看起来像......

function drawCircles(x, y, width, height, outerRadius, innerRadius) {
    var outerColors = ["#449779", "#E6B569"];
    var innerColors = ["#013d55", "#AA8D49"];
    var offsets = [0, outerRadius];
    var startAngle = 0;
    var endAngle = 2 * Math.PI;
    var iMax = (width + outerRadius) / (outerRadius);
    for (i = 0; i < iMax; i++) {
        var outerColor = outerColors[i % outerColors.length];
        var innerColor = innerColors[i % innerColors.length];;
        var offset = offsets[i % offsets.length];
        var jMax = (height + outerRadius - offset) / (2 * outerRadius);
        for (j = 0; j < jMax; j++) {
            var cx = x + j * 2 * outerRadius + offset;
            var cy = y + height - i * outerRadius;
            telaCirculos(cx, cy, outerRadius, startAngle, endAngle, outerColor, outerColor)
            telaCirculos(cx, cy, innerRadius, startAngle, endAngle, innerColor, innerColor);
        }
    }
}

然后，您将使用画布的尺寸和所需的圆圈大小调用该函数...

var outerRadius = canvasWidth / numberOfCircles;
var innerRadius = 0.8 * outerRadius;
drawCircles(0, 0, canvasWidth, canvasHeight, outerRadius, innerRadius);