如何用SVG (+JS)绘制正弦波？
如何用SVG (+JS)绘制正弦波？
提问于 2012-12-18 20:11:11
在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>回答 5
Stack Overflow用户
回答已采纳
发布于 2012-12-18 21:13:06
下面是将多个line元素添加到SVG元素的概念证明：
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>
Stack Overflow用户
发布于 2012-12-18 21:02:52
下面将向您的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);
它使用由“PATH element up”(直线)命令组成的直线。这是因为，毫不奇怪，它包含许多(500)个小线段。您可以通过使用bezier曲线绘制线段来简化路径，使其具有较少的点，但这会使代码变得复杂。而你要求的是简单。:)
Stack Overflow用户
发布于 2017-12-27 12:02:56
如果它对任何人都有用:这里是一个单线性SVG，它使用三次bezier近似近似正弦波的一半。
<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>我通过最小化bezier曲线和真余弦曲线之间的和平方(l2)距离来拟合参数36.42。https://octave-online.net/bucket~AN33qHTHk7eARgoSe7xpYg
我的回答部分基于How to approximate a half-cosine curve with bezier paths in SVG?
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13932704
复制相关文章
相似问题