js 从原点00的位置花网格

以下是一种可能的实现方式：

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

// 定义单元格大小和行列数
const cellSize = 30;
const rows = 10;
const cols = 10;

// 设置起始点为原点
let x = 0;
let y = 0;

// 循环绘制横线和竖线
for (let i = 0; i <= rows; i++) {
  // 绘制横线
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + cols * cellSize, y);
  ctx.stroke();
  // 更新起始点的纵坐标
  y += cellSize;

  // 绘制竖线
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, y + rows * cellSize);
  ctx.stroke();
  // 更新起始点的横坐标
  x += cellSize;
}

解释一下代码：

首先，获取画布元素和绘图上下文：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

然后，定义单元格大小和行列数：

const cellSize = 30;
const rows = 10;
const cols = 10;

接着，设置起始点为原点：

let x = 0;
let y = 0;

最后，循环绘制横线和竖线：

for (let i = 0; i <= rows; i++) {
  // 绘制横线
  ctx.beginPath(); // 开始路径
  ctx.moveTo(x, y); // 移动到起点
  ctx.lineTo(x + cols * cellSize, y); // 划线到终点
  ctx.stroke(); // 绘制路径
  // 更新起始点的纵坐标
  y += cellSize;

  // 绘制竖线
  ctx.beginPath(); // 开始路径
  ctx.moveTo(x, y); // 移动到起点
  ctx.lineTo(x, y + rows * cellSize); // 划线到终点
  ctx.stroke(); // 绘制路径
  // 更新起始点的横坐标
  x += cellSize;
}

具体地，每次循环先绘制一条横线，然后更新起始点的纵坐标；再绘制一条竖线，然后更新起始点的横坐标。循环行数+1次，就可以完成整个网格的绘制了