使用CSS和JS在两点之间绘制一条对角线

<div id="diagonal-line"></div>

#diagonal-line {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: transparent;
}

function drawDiagonalLine(x1, y1, x2, y2) {
  var canvas = document.createElement('canvas');
  canvas.width = Math.abs(x2 - x1);
  canvas.height = Math.abs(y2 - y1);
  canvas.style.position = 'absolute';
  canvas.style.left = Math.min(x1, x2) + 'px';
  canvas.style.top = Math.min(y1, y2) + 'px';
  
  var context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(x1 - Math.min(x1, x2), y1 - Math.min(y1, y2));
  context.lineTo(x2 - Math.min(x1, x2), y2 - Math.min(y1, y2));
  context.strokeStyle = 'black';
  context.stroke();
  
  document.getElementById('diagonal-line').appendChild(canvas);
}

window.onload = function() {
  drawDiagonalLine(0, 0, 200, 200);
};