javascript - 动态对象模式，HTML/Javascript

Question

我以前在 html 中做过动态对象和模式，但我遇到了我在假期做的这个练习，虽然我确信它很简单，但我不能把它做对 :)

该练习要求在 500x500 Canvas 中创建一个由 4 个圆圈组成的对象“单元”，如下图所示。然后你必须创建一个名为 patternCircle(n) 的函数来从那个“单元”制作一个图案。请注意，n=1 显示 Canvas 中的“单位”，n=2 2x2，n=3 3x3，n=4 4x4 图案。

我可以成功创建“单位”，但是当我使用我的模式函数时，重叠不正确，但圆圈的 (x,y) 似乎是正确的。
我使用了三个变量，i=lines, j=rows, and side(side of the canvas, 500)/n2, 两个用于 cicles，创建线条和行，但不会创建我正在寻找的图像。

我真的希望你能看一眼代码并提供帮助。

The unit - formed by 4 circles with an interior circle each. The radius of the interior circle is 80% of the bigger one

Unit in a pattern of 4x4 - Create function that creates the pattern in the image using the "unit"

var screen, paint;

function inicGraf() {
  screen = document.getElementById("screen");
  paint = screen.getContext("2d");
}

function circleScreen(x, y, radius, colorLine, colorInside) {
  paint.lineWidth = 1;
  paint.strokeStyle = colorLine;
  paint.fillStyle = colorInside;
  paint.beginPath();
  paint.arc(x, y, radius, 0, 2.0 * Math.PI);
  paint.closePath();
  paint.fill();
  paint.stroke();
}

function figureCircle(x, y, side) {
  var r1 = (side / 2.0),
    r2 = (((side / 2.0) * 80.0) / 100.0);
  circleScreen(x + r1, y + side, r1, "#449779", "#449779");
  circleScreen(x + r1, y + side, r2, "#013D55", "#013D55");
  circleScreen(x + side, y + r1, r1, "#E6B569", "#E6B569");
  circleScreen(x + side, y + r1, r2, "#AA8D49", "#AA8D49");
  circleScreen(x, y + r1, r1, "#E6B569", "#E6B569");
  circleScreen(x, y + r1, r2, "#AA8D49", "#AA8D49");
  circleScreen(x + r1, y, r1, "#449779", "#449779");
  circleScreen(x + r1, y, r2, "#013D55", "#013D55");
}

function patternCircle(n) {
  var i, j, side = 500 / n;
  for (i = 0; i < n; i++) {
    for (j = 0; j < n; j++) {
      figureCircle(i * side, j * side, side);
    }
  }
}

Answer 1

我做了什么:

• 分离两种圆形样式，左/右 (figureCircleLeft()) 与顶部/底部 (figureCircleBottom())
• 用 j 改变 for 循环，用包含的零值向后运行
• 用 i 改变 for 循环，运行包含 n 值
• 将最后一个 for 循环加倍，以分隔圆圈的顺序
• 首先写下所有左边的圆圈
• 写下所有的圆圈
• 更改了 figureCircleBottom() 中的 y 位置

工作示例:

var screen, paint;

function inicGraf() {
    screen = document.getElementById("screen");
    paint = screen.getContext("2d");
}

function circleScreen(x, y, radius, colorLine, colorInside) {
    paint.lineWidth = 1;
    paint.strokeStyle = colorLine;
    paint.fillStyle = colorInside;
    paint.beginPath();
    paint.arc(x, y, radius, 0, 2 * Math.PI);
    paint.closePath();
    paint.fill();
    paint.stroke();
}

function figureCircleLeft(x, y, side) {
    var r1 = side / 2,
        r2 = r1 * 80 / 100;
    circleScreen(x, y + r1, r1, "#E6B569", "#E6B569");
    circleScreen(x, y + r1, r2, "#AA8D49", "#AA8D49");
}

function figureCircleBottom(x, y, side) {
    var r1 = side / 2,
        r2 = r1 * 80 / 100;
    circleScreen(x + r1, y, r1, "#449779", "#449779");
    circleScreen(x + r1, y, r2, "#013D55", "#013D55");
}

function patternCircle(n) {
    var i, j, side = 500 / n;
    for (j = n; j >= 0; j--) {
        for (i = 0; i <= n; i++) {
            figureCircleLeft(i * side, j * side, side);
        }
        for (i = 0; i <= n; i++) {
            figureCircleBottom(i * side, j * side, side);
        }
    }
}
inicGraf();
patternCircle(3);

<form name="f"><input name="n" value="3" onchange="patternCircle(+document.f.n.value);"><input type="submit" value="Set Units"></form>
<canvas id="screen" width="500" height="500"></canvas>