html - 如何在 HTML 页面上画一条连接两个元素的线？

Question

我想在 HTML 网页上动态画一条线来连接两个 html 元素，它们可以在 html 页面上移动。这个动作类似于连接两个矩形的角度，如下所示：

有什么办法可以做到这一点？

Answer 1

你可能想看看这个教程。本教程教您如何使用 HTML Canvas API 绘制线条。

HTML5 画布线教程

要使用 HTML5 Canvas 绘制线条，我们可以使用 beginPath()、moveTo()、lineTo() 和 stroke() 方法。

首先，我们可以使用 beginPath() 方法来声明我们将要绘制一条新路径。接下来，我们可以使用 moveTo() 方法定位上下文点（即绘制光标），然后使用 lineTo() 方法从起始位置到新位置绘制一条直线。最后，为了使线条可见，我们可以使用 stroke() 对线条应用笔触。除非另有说明，否则笔触颜色默认为黑色。

http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

Answer 2

您可以使用 HTML5 画布，但您必须更具体地回答您的问题，以便我们进一步为您提供帮助。