我怎样才能用 canvas 画一条线到显示中的特定坐标...（绝对坐标）

Question

我是 canvas 和 svg 的新手。我想在特定坐标之间制作一条 canvas 或 svg 线例如我有两个矩形，我必须在它们之间画一条线（在这种情况下，我必须使这条线成为两个矩形的中心)

我试过的：SVG 代码如下：

HTML：

<svg version="1.1" id="line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="15px" xml:space="preserve">
  <path class="path2" fill="#01a09e" stroke-width="5" stroke="#01a09e" d="M0 0 l890 0"/>
</svg>

CSS：

.path2 {
  stroke-dasharray: 1120;
/*   stroke-dashoffset: 800; */
  animation: draw1 5s linear alternate;
}

@keyframes draw1 {
  from {
    stroke-dashoffset: 1120;
  }
  to {
    stroke-dashoffset: 2240;
  }
}

Answer 1

您可以通过仅使用 canvas 来实现此目的。 我使用quadraticCurveTo()绘制曲线，使用rect()绘制矩形。

quadraticCurveTo()需要一个起点，这就是我在开始画线之前使用moveTo()的原因。

 const canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"); // Draw rectangle one ("r" stands for rectangle) let r_x = 20, r_y = 20, r_width = 80, r_height = 30; ctx.beginPath(); ctx.rect(r_x, r_y, r_width, r_height); // Draw curved line let start_x = r_x + r_width*2/3, start_y = r_y + r_height, point_one = { x: 20, y: 70 }, point_two = { x: 120, y: 150 }; ctx.moveTo(start_x, start_y) ctx.quadraticCurveTo( point_one.x, point_one.y, point_two.x, point_two.y ); // Draw second rectangle r_x = 80, r_y = 150; ctx.rect(r_x, r_y, r_width, r_height); ctx.stroke();

 <canvas width="300" height="200"></canvas>