Проблема выравнивания холста

Question

Я хотел бы создать поле, отображающее NxN квадратов. (в этом примере отображаются 2x2 красных квадрата) в центре холста. Поле, в котором расположены квадраты, должно быть горизонтально и вертикально центрировано на холсте. (Также точно после изменения rowCount)

Кроме того, fieldSize объявляет размер вычисляемой области, в которой выровнены красные квадраты. Изменение коэффициента изменит поля Size. ( 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

Это может помочь!

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 2

Вы можете сделать это (это работает для любого количества строк):

(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>

Answer 3

Возьмите «внутреннее пространство» без отступов и расставьте на нем свои квадраты. Из-за проблем с округлением вы не можете использовать все комбинации отступов / интервалов. Чтобы создать сетку префектов, вам придется использовать дискретные квадратные размеры, чтобы предотвратить эффекты сглаживания или размытия.

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>