在画布上绘制网格时的网格大小

Question

请参阅以下内容：Canvas raster

画布尺寸为 120 像素宽 x 80 像素高。 此代码绘制垂直线：

for (var x = 0; x <= this.CanvasWidth*2.5; x += gridSize*1.25) {
    ctx.moveTo(x + p, p);
    ctx.lineTo(x + p, this.CanvasHeight*2.5 + p);
}

如您所见，我必须将画布宽度和高度修正 2.5 倍，网格大小修正 1.25 倍。 p 用于填充，值为 0。 这对我来说没有意义。因为我想要 10x10 像素的网格，所以我认为应该增加 10（var gridSize）。同样适用于画布的宽度和高度，如果我使用 CanvasWidth 和 CanvasHeight 属性，它只会覆盖画布的一部分。

谁能告诉我这是怎么回事？谢谢！

Answer 1

看起来 CSS 的混合在您的代码中造成了一些问题，这是没有 CSS 的同一个网格

canvas = document.getElementById("grid")
canvas.width = 120;
canvas.height = 80;
ctx = canvas.getContext('2d')

var gridSize = 20;

for (var x = 0; x <= canvas.width; x += gridSize) {
  ctx.moveTo(x, 0);
  ctx.lineTo(x, canvas.height);
}

for (var y = 0; y <= canvas.height; y += gridSize) {
  ctx.moveTo(0, y);
  ctx.lineTo(canvas.width, y);
}

ctx.strokeStyle = "black";
ctx.stroke();

<canvas id="grid"></canvas>

如您所见，我没有 CSS，也没有在 for 循环中添加任何因子。
但重要的是要注意我确实设置了画布的大小：

canvas.width = 120;
canvas.height = 80;