使用Javascript检查模式

Question

我试图生成一个16x16正方形的检查图案 在JavaScript中。

我设法生成了一个16x16正方形的SVG，但不幸的是它们的颜色相同。

以下是一个例子：

＆＃13;

＆＃13;

sx = 16;
sy = 16;
qx = 180 / sx;
qy = 180 / sy;
m = 0;
qs = [];
for(n = 0;n<sy;n++)
for (m = 0; m < sx; m++) {
  qk = [];
  qa = [];
  qa.push(m * qx);
  qa.push(n * qy);
  qk.push(qa);
  qb = [];
  qb.push(m * qx + qx);
  qb.push(n * qy);
  qk.push(qb);
  qc = [];
  qc.push(m * qx + qx);
  qc.push(n * qy + qy);
  qk.push(qc);
  qd = [];
  qd.push(m * qx);
  qd.push(n * qy + qy);
  qk.push(qd);
  qs.push(qk);
}
for (i = 0; i < qs.length; i++) {
  x = [];
  for (j = 0; j < qs[i].length; j++) {
    if (j == 0) {
      x.push("M" + qs[i][j][0] + " " + qs[i][j][1]);
    } else {
      x.push("L" + qs[i][j][0] + " " + qs[i][j][1]);
    };
  };
  p = document.createElementNS('http://www.w3.org/2000/svg', "path");
  p.setAttribute("fill", "red");
  p.setAttribute("d", x.join(""));
  bild.appendChild(p);
};

＆＃13;

<svg id="bild" viewBox="0 0 180 180" width="500" height="500">
<rect width="180" height="180" fill="white"/>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你需要随意交替颜色。

sx = 16;
sy = 16;
qx = 180 / sx;
qy = 180 / sy;
m = 0;
qs = [];
for(n = 0;n<sy;n++)
for (m = 0; m < sx; m++) {
  qk = [];
  qa = [];
  qa.push(m * qx);
  qa.push(n * qy);
  qk.push(qa);
  qb = [];
  qb.push(m * qx + qx);
  qb.push(n * qy);
  qk.push(qb);
  qc = [];
  qc.push(m * qx + qx);
  qc.push(n * qy + qy);
  qk.push(qc);
  qd = [];
  qd.push(m * qx);
  qd.push(n * qy + qy);
  qk.push(qd);
  qs.push(qk);
}
for (i = 0; i < qs.length; i++) {
  x = [];
  for (j = 0; j < qs[i].length; j++) {
    if (j == 0) {
      x.push("M" + qs[i][j][0] + " " + qs[i][j][1]);
    } else {
      x.push("L" + qs[i][j][0] + " " + qs[i][j][1]);
    };
  };
  p = document.createElementNS('http://www.w3.org/2000/svg', "path");
  p.setAttribute("fill", Math.floor(i + i / 16) % 2 ? "red" : "white");
  p.setAttribute("d", x.join(""));
  bild.appendChild(p);
};

<svg id="bild" viewBox="0 0 180 180" width="500" height="500">
<rect width="180" height="180" fill="white"/>
</svg>