<canvas id="canvas" width="500" height="500"></canvas>

window.onload = function () {
  let canvas = document.querySelector("#canvas");
  let ctx = canvas.getContext("2d");
  // 绘制网格 grid
  for (let x = 0.5; x < 500; x += 10) {
    ctx.moveTo(x, 0);
    ctx.lineTo(x, 500);
  }
  for (let y = 0; y < 500; y += 10) {
    ctx.moveTo(0, y);
    ctx.lineTo(500, y);
  }
  ctx.strokeStyle = "#eee";
  ctx.stroke();
  // lines
  ctx.strokeStyle = "gray";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(51, 24);
  ctx.lineTo(314, 540);
  // k=(y2-y1)/(x2-x1)

  ctx.moveTo(477, 34);
  ctx.lineTo(86, 484);
  ctx.stroke();
  // 原点
  // 问题来了两点确定一条直线怎么知道线上的点的位置关系
  // 两点式公式
  // (y-y2)/(y1-y2) = (x-x2)/(x1-x2)。
  // 我们设y=200,可以求出x=140.7
  ctx.beginPath();
  ctx.moveTo(140.7, 200);
  ctx.arc(140.7, 200, 5, 0, 2 * Math.PI);
  // 设x=350,求右边直线的y点 180.16
  ctx.moveTo(350, 180.16);
  ctx.arc(350, 180.16, 5, 0, 2 * Math.PI);
  // 求原点坐标
  ctx.moveTo(211.713, 339.3166);
  ctx.arc(211.713, 339.3166, 5, 0, 2 * Math.PI);
  ctx.fillStyle = "red";
  ctx.fill();
  // 标记点的坐标
  ctx.font = "14px Arial";
  ctx.beginPath();
  ctx.fillText("(x0,y0)", 140.7 + 5, 200 + 5);
  ctx.fillText("(x1,y1)", 211.713 + 5, 339.3166 + 5);
  ctx.fillText("(x2,y2)", 350 + 5, 180.16 + 5);
  // 编写arcTo
  ctx.beginPath();
  ctx.lineWidth = 3;
  ctx.moveTo(140.7, 200);
  ctx.arcTo(211.713, 339.3166, 350, 180.16, 100);
  ctx.stroke();
};