Question

我之前已经在html中完成了动态对象和模式，但是我在假期假期时遇到了这个练习，并且虽然我确定它很简单但是不能正确行事：）

exercice要求创建一个对象＆＃34; unit＆＃34;由4个圆圈制成，如图中所示，在500x500帆布中。然后你必须创建一个名为patternCircle（n）的函数来从那个＆＃34; unit＆＃34;创建一个模式。请注意，n = 1在画布中显示＆＃34;单位＆＃34;，n = 2 2x2，n = 3 3x3，n = 4 4x4模式。

我可以成功创建＆＃34;单位＆＃34;但是当我使用我的模式功能时，重叠不对，但圆圈的（x，y）似乎是正确的我使用三个var，i =行，j =行和side（画布的一边，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()）vs上/下（figureCircleBottom()）
使用j更改for循环，向后运行并包含零值
使用i更改for循环，运行包含n值
将最后一个for循环加倍，以分隔圆圈的顺序
首先写下所有左侧圈子
写下所有底圈
更改了y

figureCircleBottom()

工作示例：

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>

动态对象模式，HTML / Javascript

1 个答案: