如何在javascript中绘制点之间的线

我尝试使用javascript代码在表中绘制线条（右边框）。我的代码

plotPoints(item,  index) {
  var myElement = document.querySelector("#image-" + item + "-" + index);
  (id is id = "image-0-4")
  var position = this.getPosition(myElement);
  console.log("The image is located at: " + position.x + ", " + position.y);

  var first = index + 1;
  var second = index + 2;
  var third = index + 3;

  var testDiv1 = document.getElementById("p1-" + item + "-" + first);
  var position1 = this.getPosition(testDiv1);
  console.log("The image is located at 1: " + position1.x + ", " + position1.y);

  var testDiv2 = document.getElementById("p1-" + item + "-" + second);
  var position2 = this.getPosition(testDiv2);
  console.log("The image is located at 1: " + position2.x + ", " + position2.y);

  var testDiv3 = document.getElementById("p1-" + item + "-" + third);
  var position3 = this.getPosition(testDiv3);
  console.log("The image is located at 1: " + position3.x + ", " + position3.y);

}


getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

我试着画线来连接同一个数字块。使用位置函数得到所有块的x和y位置

如何在同一数字块之间绘制线（如数字1块连接每列的线）

---

为什么不使用画布、SVG或WebGL来完成此任务？从某种意义上说，使用图形编辑器并手动绘制所有内容是有意义的。我正在尝试不使用画布。使用位置尝试绘制右边框线。停止使用像素坐标。而是在元素（黄色div）或封闭的表格单元格上的某些

数据-

属性中表示网格坐标。基于网格坐标迭代所有中间行号，并为两个相邻列左侧的元素设置

border right

css属性。您可以使用

querySelector

和合适的css选择器。为什么不使用画布、SVG或WebGL来完成此任务？从某种意义上说，使用画布并手动绘制所有内容是有意义的。我正在尝试不使用画布。使用位置尝试绘制右边框线。停止使用像素坐标。而是在元素（黄色div）或封闭的表格单元格上的某些

数据-

属性中表示网格坐标。基于网格坐标迭代所有中间行号，并为两个相邻列左侧的元素设置

border right

css属性。您可以使用

querySelector

和合适的css选择器。