js绘制平面直角坐标系和刻度线并绘制图片到这个坐标系中

首先，我们需要在 HTML 中创建一个 canvas 元素用于绘图，以及一个 img 元素用于加载图片：

<canvas id="canvas"></canvas>
<img src="image.jpg" id="image" style="display:none;">

然后在 JavaScript 中获取 canvas 和 img 元素，并设置 canvas 的宽度和高度：

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

const img = document.getElementById('image');
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  draw();
}

接下来，我们可以定义函数 `draw` 来绘制平面直角坐标系和刻度线，并将图片绘制到坐标系中：

function draw() {
  // 绘制坐标系
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(50, canvas.height - 50);
  ctx.lineTo(canvas.width - 50, canvas.height - 50);
  ctx.strokeStyle = 'black';
  ctx.stroke();

  // 绘制刻度线
  ctx.beginPath();
  for (let i = 0; i < 10; i++) {
    const x = 50 + (canvas.width - 100) / 9 * i;
    const y = canvas.height - 50;
    ctx.moveTo(x, y - 5);
    ctx.lineTo(x, y + 5);
  }
  for (let i = 0; i < 10; i++) {
    const x = 50;
    const y = 50 + (canvas.height - 100) / 9 * i;
    ctx.moveTo(x - 5, y);
    ctx.lineTo(x + 5, y);
  }
  ctx.strokeStyle = 'gray';
  ctx.stroke();

  // 绘制图像
  const x = 50 + (canvas.width - 100) / 2 - img.width / 2;
  const y = 50 + (canvas.height - 100) / 2 - img.height / 2;
  ctx.drawImage(img, x, y);
}

最后，我们需要在 img 元素的 `src` 属性中设置图片路径，以触发 onload 事件并执行绘制函数：

img.src = 'image.jpg';

完整代码如下：

<canvas id="canvas"></canvas>
<img src="image.jpg" id="image" style="display:none;">

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

  const img = document.getElementById('image');
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    draw();
  }
  img.src = 'image.jpg';

  function draw() {
    // 绘制坐标系
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(50, canvas.height - 50);
    ctx.lineTo(canvas.width - 50, canvas.height - 50);
    ctx.strokeStyle = 'black';
    ctx.stroke();

    // 绘制刻度线
    ctx.beginPath();
    for (let i = 0; i < 10; i++) {
      const x = 50 + (canvas.width - 100) / 9 * i;
      const y = canvas.height - 50;
      ctx.moveTo(x, y - 5);
      ctx.lineTo(x, y + 5);
    }
    for (let i = 0; i < 10; i++) {
      const x = 50;
      const y = 50 + (canvas.height - 100) / 9 * i;
      ctx.moveTo(x - 5, y);
      ctx.lineTo(x + 5, y);
    }
    ctx.strokeStyle = 'gray';
    ctx.stroke();

    // 绘制图像
    const x = 50 + (canvas.width - 100) / 2 - img.width / 2;
    const y = 50 + (canvas.height - 100) / 2 - img.height / 2;
    ctx.drawImage(img, x, y);
  }
</script>