画布对齐问题

Question

我想生成一个显示NxNsquares 的字段。 （在示例中显示 2x2 红色方块） 在画布的中心。方块所在的区域应在画布中水平和垂直居中。 （当然也是在更改 rowCount 之后）

此外，fieldSize 声明了红色方块对齐的计算区域的大小。更改因子将更改字段大小。 （1 == 画布大小，0.5 = 1/2 画布大小）

---

我的问题：

在下面的示例中（很难看到），红色框并没有真正居中，但我希望它们居中。看看这张图片：

let canvas = document.getElementById("canvas")


/* edit these values */
let rowCount = 2
let fieldSize = canvas.width * 0.8
/********************/


let ctx = canvas.getContext("2d")

for (let y = 0; y < rowCount; y++) {
  for (let x = 0; x < rowCount; x++) {

    let squareSize = (fieldSize / rowCount) * 0.7

    let positionX = (fieldSize / rowCount) * (x) + (canvas.width - fieldSize) * 0.5
    let positionY = (fieldSize / rowCount) * (y) + (canvas.width - fieldSize) * 0.5

    ctx.rect(positionX, positionY, squareSize, squareSize);
    ctx.fillStyle = "red"
    ctx.fill()
  }

}

<canvas style="background: green" id="canvas" width="300" height="300" id="codeCanvas"></canvas>

Answer 1

采用没有填充的“内部空间”，并在其上展开你的方块。 由于舍入问题，您不能随意使用填充/间距的所有组合。要生成完美的网格，您必须使用离散的正方形大小来防止锯齿或模糊效果。

function tiled(canvas, rowCount) {
  const ctx = canvas.getContext("2d");
  const spacing = 10;
  const padding = 30;
  const cellSize = (canvas.width - 2 * padding + spacing) / rowCount;
  const squareSize = cellSize - spacing;

  let positionX = padding;
  let positionY = padding;

  for (let y = 0; y < rowCount; y++) {
    positionX = padding;
    for (let x = 0; x < rowCount; x++) {
      ctx.rect(positionX, positionY, squareSize, squareSize);
      ctx.fillStyle = "red"
      ctx.fill();
      positionX += cellSize;
    }
    positionY += cellSize;
  }
}

tiled(document.getElementById("canvas"), 2);
tiled(document.getElementById("canvas2"), 3);
tiled(document.getElementById("canvas3"), 4);
tiled(document.getElementById("canvas4"), 5);

<canvas style="background: green" id="canvas" width="300" height="300"></canvas>
<canvas style="background: green" id="canvas2" width="300" height="300"></canvas>
<canvas style="background: green" id="canvas3" width="300" height="300"></canvas>
<canvas style="background: green" id="canvas4" width="300" height="300"></canvas>

Answer 2

这可能会有所帮助！

let canvas = document.getElementById("canvas")

/* edit these values */
let rowCount = 2
let fieldSize = canvas.width * 0.8
/********************/

let ctx = canvas.getContext("2d")

let width = canvas.width;
let height = canvas.height;

let dist = canvas.width/(rowCount + 1)

for(let i=1;i<=rowCount;i++){
  for(let j=1;j<=rowCount;j++){
  let w = (fieldSize / rowCount) * 0.8
    let posx = dist*i - w/2;
    let posy = dist*j - w/2;
    ctx.rect(posx,posy,w,w);
    ctx.fillStyle = "blue"
    ctx.fill();
  }
}

<canvas style="background: green" id="canvas" width="300" height="300" id="codeCanvas"></canvas>

Answer 3

你可以这样做（它适用于任意数量的行）：

(canvas.width - fieldSize) / 2)

用于填充字段

x * (fieldSize / rowCount)

是每个方格的相对位置

(fieldSize / rowCount - squareSize) / 2

用于每个正方形的填充，您的代码中缺少该填充

/* edit these values */
let rowCount = 2
let fieldSize = canvas.width * 0.8
let squareSize = (fieldSize / rowCount) * 0.8
/********************/


let ctx = canvas.getContext("2d")

for (let y = 0; y < rowCount; y++) {
    for (let x = 0; x < rowCount; x++) {

        let positionX = (canvas.width - fieldSize) / 2 + x * (fieldSize / rowCount) + (fieldSize / rowCount - squareSize) / 2
        let positionY = (canvas.width - fieldSize) / 2 + y * (fieldSize / rowCount) + (fieldSize / rowCount - squareSize) / 2

        ctx.rect(positionX, positionY, squareSize, squareSize);
        ctx.fillStyle = "red"
        ctx.fill()
    }
}

<canvas style="background: green" id="canvas" width="300" height="300" id="codeCanvas"></canvas>