如何用SVG（+ JS）绘制正弦波？

本文介绍了如何用SVG（+ JS）绘制正弦波？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在SVG中绘制正弦波最简单的解决方案是什么？
我想正弦波应该在JavaScript中以简单的循环重复：...）

What would be the simplest solution to draw sine waves in SVG?I guess sine waves should be repeated in a simple loop with JavaScript... :)

以下是XY坐标作为一个好的开始...：）

Here are the X-Y coordinates as a good start... :)

<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>

推荐答案

这是一个概念证明， c $ c> line 元素添加到SVG元素中：

Here is a proof of concept that adds multiple line elements to the SVG element:

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);
}

下面是一个演示：

这篇关于如何用SVG（+ JS）绘制正弦波？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

SINE