js绘制平面直角坐标系和刻度

可以使用HTML5中的canvas标签和JavaScript来绘制平面直角坐标系和刻度。

首先，我们需要在HTML文档中创建一个canvas元素：

<canvas id="myCanvas"></canvas>

然后，在JavaScript中获取这个canvas元素和它的上下文对象：

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

接下来，我们可以设置canvas的宽度和高度，并绘制坐标轴：

// 设置canvas的宽度和高度
canvas.width = 500;
canvas.height = 500;

// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(50, 450);
ctx.lineTo(450, 450);
ctx.moveTo(50, 50);
ctx.lineTo(50, 450);
ctx.stroke();

上面的代码中，我们设置了canvas的宽度和高度为500，并绘制了一个起点为(50,450)、终点为(450,450)的水平线和一个起点为(50,450)、终点为(50,50)的竖直线。接着，我们可以绘制刻度：

// 绘制x轴刻度
for (let i = 1; i <= 8; i++) {
  ctx.beginPath();
  ctx.moveTo(50 + i * 50, 450);
  ctx.lineTo(50 + i * 50, 460);
  ctx.stroke();
  ctx.fillText(i, 48 + i * 50, 475);
}

// 绘制y轴刻度
for (let i = 1; i <= 8; i++) {
  ctx.beginPath();
  ctx.moveTo(50, 450 - i * 50);
  ctx.lineTo(40, 450 - i * 50);
  ctx.stroke();
  ctx.fillText(i, 20, 455 - i * 50);
}

上面的代码中，我们通过循环绘制了x轴和y轴的刻度，并使用fillText方法在坐标系上显示刻度值。最终的代码如下：

<canvas id="myCanvas"></canvas>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  // 设置canvas的宽度和高度
  canvas.width = 500;
  canvas.height = 500;

  // 绘制坐标轴
  ctx.beginPath();
  ctx.moveTo(50, 450);
  ctx.lineTo(450, 450);
  ctx.moveTo(50, 50);
  ctx.lineTo(50, 450);
  ctx.stroke();

  // 绘制x轴刻度
  for (let i = 1; i <= 8; i++) {
    ctx.beginPath();
    ctx.moveTo(50 + i * 50, 450);
    ctx.lineTo(50 + i * 50, 460);
    ctx.stroke();
    ctx.fillText(i, 48 + i * 50, 475);
  }

  // 绘制y轴刻度
  for (let i = 1; i <= 8; i++) {
    ctx.beginPath();
    ctx.moveTo(50, 450 - i * 50);
    ctx.lineTo(40, 450 - i * 50);
    ctx.stroke();
    ctx.fillText(i, 20, 455 - i * 50);
  }
</script>