我怎样才能用 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: 30, y: 130 },
    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>

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

How can i draw a line with canvas to specific Coordinates in display... (absolute cordinate)

javascript

html

css

svg

canvas