JavaScript 网格绘制 - 使用循环在画布上创建网格

以下是使用循环在画布上绘制网格的示例代码：

// 获取画布元素和上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 设置网格线条颜色
ctx.strokeStyle = '#ccc';

// 画横向网格线
for (var i = 0; i <= canvas.height; i += 10) {
  ctx.beginPath();
  ctx.moveTo(0, i);
  ctx.lineTo(canvas.width, i);
  ctx.stroke();
}

// 画纵向网格线
for (var j = 0; j <= canvas.width; j += 10) {
  ctx.beginPath();
  ctx.moveTo(j, 0);
  ctx.lineTo(j, canvas.height);
  ctx.stroke();
}

以上代码会在画布上画出10像素间隔的网格线，线条颜色为灰色。可以根据需求调整网格间隔和线条颜色。