前端css实现两点连线

// dots是点的集合 : Array<{ x: number; y: number; }>
dots.map((dot, index) => {
      // 最后一个点没有连线
      if (!dot[index + 1]) return;

      const AB = {
        x: dots[index + 1].x - dot.x,
        y: dots[index + 1].y - dot.y,
      }
      const BC = {
        x: 0,
        y: 1, 
      }
  
      // 向量的模
      const a = Math.sqrt(Math.pow(AB.x, 2) + Math.pow(AB.y, 2));
      const b = Math.sqrt(Math.pow(BC.x, 2) + Math.pow(BC.y, 2));
  
      
      const aXb = (AB.x * BC.x) + (AB.y * BC.y);
      const cos_ab = aXb/(a*b);
    
      // 求出偏转角度
      const angle_1 = Math.acos(cos_ab)*(180/Math.PI);

      // 10 是点的半径, 根据点的大小修改
      lines.push({
        x: dot.x + 10 ,
        y: dot.y + 10 ,
        width: a ,
        angel: AB.x > 0 ? Math.sqrt(Math.pow(angle_1, 2)) : -Math.sqrt(Math.pow(angle_1, 2))
      })

      
    })

css样式, 看样式猜dom嘻嘻嘻

.box{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin:0 0;
    .dot {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: red;
    }
    .line {
      height: 1px;
      position: absolute;
      background-color: green;
      transform-origin:0 0;
    }
  }

DOM

      

        {lines.map((line) => {
          return 

        })}
        {dots.map((dot) => {
          return 

        })}