如何使用 SVG (+JS) 绘制正弦波？

Question

在 SVG 中绘制正弦波最简单的解决方案是什么？ 我猜应该用 JavaScript 在一个简单的循环中重复正弦波...... :)

这里是 X-Y 坐标作为一个好的开始... :)

http://jsbin.com/adaxuy/1/edit

<svg>
  <line x1="0" y1="250" x2="500" y2="250"
        style="stroke:black;stroke-width:1"/>
  <line x1="250" y1="0" x2="250" y2="500"
        style="stroke:black;stroke-width:1"/>
</svg>

Answer 1

直线近似的替代方法是贝塞尔近似。一个周期的第一季度的一个非常好的近似值是具有以下控制点的三次贝塞尔曲线：

 0   0
1/2 1/2
 1   1
π/2  1

编辑： 使用以下控制点可以获得更精确的近似值：

0                    0
0.512286623256592433 0.512286623256592433
1.002313685767898599 1
1.570796326794896619 1

（参见 cmets 中 NominalAnimal 的解释）

Demo comparing line elements (gray) and "good" Bézier (red) and "better" Bézier (green).

在样条线端点精确插入斜率和曲率的近似值是

       0                0 
(6−(3/2π−3)²)/6  (6−(3/2π−3)²)/6
       1                1
      π/2               1

(See derivation)

Answer 2

这是一个概念证明，它向 SVG 元素添加了多个 line 元素：

var svg = document.getElementById('sine_wave').children[0];
var origin = { //origin of axes
    x: 100,
    y: 100
};
var amplitude = 10; // wave amplitude
var rarity = 1; // point spacing
var freq = 0.1; // angular frequency
var phase = 0; // phase angle

for (var i = -100; i < 1000; i++) {
    var line = document.createElementNS("http://www.w3.org/2000/svg", "line");

    line.setAttribute('x1', (i - 1) * rarity + origin.x);
    line.setAttribute('y1', Math.sin(freq*(i - 1 + phase)) * amplitude + origin.y);

    line.setAttribute('x2', i * rarity + origin.x);
    line.setAttribute('y2', Math.sin(freq*(i + phase)) * amplitude + origin.y);

    line.setAttribute('style', "stroke:black;stroke-width:1");

    svg.appendChild(line);
}

html, body, div{
    height:100%;
}

<div id="sine_wave">

  <svg width="1000" height="1000">
    <line x1="100" y1="0" x2="100" y2="200"
          style="stroke:black;stroke-width:1"/>
    <line x1="0" y1="100" x2="1000" y2="100"
          style="stroke:black;stroke-width:1"/>
  </svg>

</div>

Answer 3

以下将为您的 SVG 图形添加一个单周期正弦波：

var XMAX = 500;
var YMAX = 500;

// Create path instructions
var path = [];
for (var x = 0; x <= XMAX; x++) {
    var angle = (x / XMAX) * Math.PI * 2;  // angle = 0 -> 2π
    var y = Math.sin(angle) * (YMAX / 2) + (YMAX / 2);
    // M = move to, L = line to
    path.push((x == 0 ? 'M' : 'L') + x + ',' + y);
}

// Create PATH element
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute('d', path.join(' ') );
pathEl.style.stroke = 'blue';
pathEl.style.fill = 'none';

// Add it to svg element
document.querySelector('svg').appendChild(pathEl);

​    ​

这是jsfiddle you can run。

这使用由“lineto”（直线）命令组成的PATH element。这是因为，毫不奇怪，它包含许多 (500) 个小线段。您可以通过使用贝塞尔曲线绘制线段来简化路径以减少点，但这会使代码复杂化。你要求简单。 :)

Answer 4

如果它对任何人有用：这是一个单线 SVG，它使用三次贝塞尔近似近似接近正弦波的一半。

<svg width="100px" height="100px" viewBox="0 0 100 100">
    <path stroke="#000000" fill="none" d="M0,0 C36.42,0,63.58,100,100,100" />
</svg>

我通过最小化贝塞尔曲线和真实余弦曲线之间的平方和 (l2) 距离来拟合参数 36.42。 https://octave-online.net/bucket~AN33qHTHk7eARgoSe7xpYg

我的回答部分基于How to approximate a half-cosine curve with bezier paths in SVG?

Answer 5

在 X 轴上循环，每次迭代都使用当前 X 值的正弦函数计算 Y 位置。