Javascript + svg，在两个给定点之间绘制窦(波)线

JavaScript是一种广泛应用于Web开发的编程语言，而SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言。在两个给定点之间绘制窦（波）线可以通过以下步骤实现：

创建一个HTML文件，并在文件中引入JavaScript和SVG库。
在HTML文件中创建一个SVG容器，用于显示绘制的图形。
在JavaScript中，使用SVG的路径元素（<path>）来绘制窦（波）线。
使用JavaScript的数学函数来计算窦（波）线的路径坐标。
将计算得到的路径坐标作为路径元素的d属性值，以定义窦（波）线的形状。
将路径元素添加到SVG容器中，以显示窦（波）线。

以下是一个示例代码，演示如何使用JavaScript和SVG绘制窦（波）线：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"></script>
</head>
<body>
  <svg id="wave" width="500" height="200"></svg>

  <script>
    // 创建SVG容器
    var draw = SVG('wave').size(500, 200);

    // 定义窦（波）线的起始点和终止点
    var startPoint = { x: 50, y: 100 };
    var endPoint = { x: 450, y: 100 };

    // 计算窦（波）线的路径坐标
    var pathData = calculateWavePath(startPoint, endPoint);

    // 绘制窦（波）线
    var wavePath = draw.path(pathData).fill('none').stroke({ color: 'blue', width: 2 });

    // 计算窦（波）线的路径坐标
    function calculateWavePath(startPoint, endPoint) {
      var pathData = `M ${startPoint.x} ${startPoint.y}`;

      var controlPoint1 = { x: startPoint.x + 100, y: startPoint.y + 50 };
      var controlPoint2 = { x: endPoint.x - 100, y: endPoint.y - 50 };

      pathData += ` C ${controlPoint1.x} ${controlPoint1.y}, ${controlPoint2.x} ${controlPoint2.y}, ${endPoint.x} ${endPoint.y}`;

      return pathData;
    }
  </script>
</body>
</html>

这段代码使用了SVG.js库来简化SVG的操作。它创建了一个SVG容器，并在容器中绘制了一条蓝色的窦（波）线，起始点为(50, 100)，终止点为(450, 100)。窦（波）线的形状由两个控制点决定，通过计算得到路径坐标，并将其作为路径元素的d属性值来定义窦（波）线的形状。

这只是一个简单的示例，实际应用中可以根据需求进行更复杂的窦（波）线绘制。腾讯云提供了一系列与云计算相关的产品，如云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。具体产品介绍和相关链接地址请参考腾讯云官方网站。

Javascript + svg，在两个给定点之间绘制窦(波)线

、、

我正在尝试用svg写一个javascript加载器。想法是，它是一个从下到上在两侧均匀填充的圆，装载机的顶线是一个从左到右连续移动的正弦波。现在的问题是顶线需要是一个动画波浪。我试着用二次bezier曲线来做，但我在计算里面的点时遇到了问题。我只知道start(x，y)和end(x，y)点，不知道如何计算其他点。

浏览 21提问于2016-07-27得票数 0

回答已采纳

1回答

用线性回归拟合多个正弦波(R)

、、

我正在尝试使用R中的lm函数将多个正弦波(准确地说是三个)拟合到数据中。我能够得到一个结果，但它看起来远远不正确：绿线有点不稳定，这是应该的，但它似乎只是一个正弦(加上抛物线)，与数据不太匹配。我做错了什么？我使用的代码：(句号是硬编码的，因为它们是给我的。此外，timetopdh是以秒为单位的时间，heightdh在某个时间点的水位。)

浏览 6提问于2017-01-27得票数 0

1回答

如何在两条鼻窦曲线之间绘制曲面

、、

我想画两条正弦曲线之间的曲面。这两条窦曲线具有相同的时间基数，这意味着我的两个窦的第一个点的x相同，第二个点的x也相同。如果你有更好的想法，我很乐意听，如果有人已经这样做了，那就更好了。

浏览 20提问于2020-02-20得票数 2

2回答

用一段生成SVG正弦波

、、、

我目前正在尝试生成一个SVG路径，表示一个适合网页宽度的正弦波。 d += (Math.sin(freq * (i + phase)) * amplitude + origin.y);它为svg17, 71.10039326578718 L 18, 83.0827233024

浏览 0提问于2017-03-23得票数 6

1回答

在android中高效绘制正弦波

、、、

我正在制作一个应用程序，我需要在两个给定点之间绘制一个正弦波。我已经谷歌过了，谷歌过了，但我还没有找到任何合适的东西。在android中有没有一种有效的方法来使用一些预定义的点来绘制一个平滑的波浪形？

浏览 4提问于2011-06-28得票数 3

回答已采纳

3回答

通过随机点绘制美观的Bezier曲线

、、、、

我正在使用javascript和RaphaelJS来绘制一条流畅的线，通过输出到SVG的随机点。这条线完全是水平的，不会回到X轴。目前，我使用三次Bezier曲线来绘制从一点到另一点的线。问题是，这条线看起来不够好。两条曲线在一个点上有一个难看的连接点，一条曲线结束，另一条曲线开始，在关节中具有相当随机的角度。我如何让前一条曲线平滑地转换成下一条曲线，同时仍然保持直线通过给定点？

浏览 2提问于2011-08-10得票数 15

回答已采纳

3回答

如何在不使用外部库的情况下使用SDL画线

、

如何使用SDL c++库在两个给定点之间绘制二维线。我不想使用任何其他外部库，如SDL_draw或SDL_gfx。

浏览 4提问于2012-07-31得票数 4

回答已采纳

1回答

用于绘制曲线切线的Matlab代码

、、

我需要在特定点绘制一条曲线的切线(假设该点是由用户选择的)。我已经编写了一段代码，允许用户手动拾取两个点，然后在它们之间绘制一条线。但我想让这个过程自动化。

浏览 3提问于2012-11-26得票数 1

12回答

在两个元素之间画一条连接线

、、、、

如何在两个或更多元素之间绘制一条线来连接它们？HTML/CSS/JavaScript/SVG/Canvas的任意组合都可以。

浏览 339提问于2011-06-08得票数 127

回答已采纳

2回答

SVG/Vector map室内导航路线

、、、、

我一直在网上搜索关于如何为基于SVG的室内平面图实现我自己的点对点导航系统的教程或方法。我已经在网上搜索过了，但谷歌地图的唯一选项是有效的。但是，我使用Illustrator将我的地图创建为使用路径/向量的SVG图像。我不需要为用户实现任何导航指令，只需要一条从一个点到另一个点的简单路线。必须有一种方法来使用矢量在地图上绘制导航路径可以转弯的点，等等。谢谢

浏览 1提问于2015-03-19得票数 3

2回答

如何在Google地图上动态加载标记并绘制它们之间的路线？

我需要做一个与谷歌地图在它的页面。它将在(公司的办公室)内部有一个固定点。这个是可能的吗？

浏览 0提问于2011-10-04得票数 0

回答已采纳

1回答

在两个已知点之间绘制直线

、

如何在两个给定点之间绘制基本的非连接线。我目前在WebBrowser上显示了GMMap，并使用了GMPolyline组件。使用两个经纬度对的已知值。只是需要帮助画出两者之间的线。使用它来绘制方向角线。

浏览 2提问于2014-04-19得票数 0

0回答

使用javascript在不同容器中绘制svg元素

、、

我有两个svg容器，我想在两个容器中绘制不同的svg元素。让我们假设：<div><svg height=&qu

浏览 0提问于2016-07-12得票数 0

2回答

如何根据点和坡度绘制一条线？(SD线)

为了检查两个变量之间的关联，我想绘制SD线，它被定义为data(mtcars)

浏览 1提问于2020-01-24得票数 2

回答已采纳

3回答

在d3中在两个坐标之间画一条直线

我在d3中绘制了x轴和y轴。yScale) .innerTickSize(-width) .tickPadding(10); .attr("width", width + margin.left + margin.right) .attr(&quo

浏览 0提问于2015-09-10得票数 2

回答已采纳

2回答

绘制弧点

、、

有没有人能给我一个在圆弧上画点的算法？我知道起点、终点和半径。我需要显示由这些信息(起点、终点和半径)构成的圆弧上的点。我有起点(x，y)，终点(a，b)。

浏览 1提问于2012-01-02得票数 1

1回答

我如何清除移动SVG线所留下的痕迹？

、、、

在一个web应用程序中，我想用一条平滑的线条连接两个HTML元素，并允许用户移动任何一个元素。该行应继续连接这两个元素。我创建了一个，它说明了这个概念。下面是我使用jQuery绘制这条线的基本代码： var $body = $("body") .attr("height", 200)

浏览 2提问于2015-05-13得票数 2

回答已采纳

1回答

我需要从线段中画一个三角形--如何找到中心点？

、、、

在我的javascript应用程序中，我有一个线段--基本上是画布上已知的两个点。我需要动态地画一个钝的等腰三角形，在这些点上，最大的线是两点，两条匹配线是从中心点到边缘。所以我想问题是，如何找到任意两个给定点之间的中心点？我对javascript没意见，对数学没什么意见。

浏览 0提问于2015-01-09得票数 2

回答已采纳

1回答

HTML SVG元素没有正确呈现：

、、

我试图在HTML中显示不同的SVG元素(行、椭圆、矩形)，但是面对这个奇怪的问题:元素被切割，有时以模糊的方式显示(像锯片这样的小切口)。我尝试给出不同大小的div和元素，它们的位置不同，但似乎没有什么工作，请检查以下示例代码：<svgxmlns="http://www.w3.org/2000/svg" vers

浏览 3提问于2014-12-03得票数 1

回答已采纳

1回答

SVG问题；更新移动元素是不稳定的，为什么？

、、、

使用下面的代码绘制多于~5+的SVG线会在移动元素时造成性能波动，特别是在绘制较长的SVG线时。这只是一个自然的SVG性能限制(因为svg画布大小)，还是我的代码有什么问题？项目运行中可以在这里看到(到目前为止只支持Chrome和Firefox，查看左下角的fps，尝试展开对象，我在启动时得到大约14fps)：svg是由jQuery.svg创建的一个大的(100%*1

浏览 0提问于2010-06-26得票数 0

回答已采纳

点击加载更多