如何为偶数个单元格修复 canvas 网格？

Question

我尝试用网格填充 canvas 矩形或正方形，但有时我得到的 canvas 尺寸为 16px16px 的数字或单元格不是偶数，但对于 32x32px 它有效。

我的尝试是 link

如何解决？

  for (i = 0; i <= height; i += gridSize) {
    ctx.moveTo(1, i);
    ctx.lineTo(width, i);
    ctx.stroke();
  }

  for (i = 0; i <= width; i += gridSize) {
    ctx.moveTo(i, 1);
    ctx.lineTo(i, height);
    ctx.stroke();
  }

如你所见，我使用 gridSize 因为 4 是 32 或 16 的倍数

Answer 1

在您的代码中设置了 gridSize，因此如果您需要偶数个单元格，那么唯一的选择是将列和行设置为满足您需要的值，请参见下面的代码。

function CrossTemplate(gridOptions, canvas) {
  let ctx = canvas.getContext('2d');
  ctx.strokeStyle = gridOptions.color;
  ctx.lineWidth = gridOptions.linesSize;
  ctx.translate(0.5, 0.5);

  h = gridOptions.GridSize * gridOptions.rows +1
  w = gridOptions.GridSize * gridOptions.columns +1
  for (let i = 1; i <= h; i += gridOptions.GridSize) {
    ctx.moveTo(1, i);
    ctx.lineTo(w , i);    
  }    
  for (let i = 1; i <= w; i += gridOptions.GridSize) {
    ctx.moveTo(i, 1);
    ctx.lineTo(i, h);    
  }
  ctx.stroke();
}


let canvas = document.createElement("canvas");
let gridOptions = {
  color: 'red',
  GridSize: 14,
  linesSize: 1,
  columns: 10,
  rows: 6
}

canvas.width = 5 + gridOptions.GridSize * gridOptions.columns;
canvas.height = 5 + gridOptions.GridSize * gridOptions.rows;
CrossTemplate(gridOptions, canvas);
document.body.appendChild(canvas);

如何为偶数个单元格修复 canvas 网格？

How to fix canvas grid for even number of cells?

canvas

html5-canvas